Compare commits
159 Commits
5b934ecd17
...
ead9add14a
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
ead9add14a | ||
|
|
d24c12257b | ||
|
|
fa8dedb78f | ||
|
|
1acf1f8052 | ||
|
|
55e80254ef | ||
|
|
4a7ee0b742 | ||
|
|
7dcc220b17 | ||
|
|
28da44a63b | ||
|
|
7596c45f40 | ||
|
|
06c5e64f54 | ||
|
|
49120a2e1f | ||
|
|
7d1aa498b4 | ||
|
|
9372db9037 | ||
|
|
e7f7853feb | ||
|
|
fd29fc9b20 | ||
|
|
c642678502 | ||
|
|
e44cf88635 | ||
|
|
ad7d404482 | ||
|
|
c68243f95e | ||
|
|
a732eab59f | ||
|
|
3c87af65de | ||
|
|
4d6e41ed1c | ||
|
|
9bffd147ba | ||
|
|
8d7e59c095 | ||
|
|
a8168c6db1 | ||
|
|
80d6fb8cc9 | ||
|
|
210a3bec81 | ||
|
|
8d8df19256 | ||
|
|
2b6b43afdd | ||
|
|
d322370e44 | ||
|
|
bac043f2ba | ||
|
|
6625889aee | ||
|
|
9e260a1bb8 | ||
|
|
6e28dc148e | ||
|
|
d2f6efbd3f | ||
|
|
814c59cba4 | ||
|
|
ea3566baa6 | ||
|
|
ec382aacf1 | ||
|
|
9bd2f0c1ea | ||
|
|
9b58416ed4 | ||
|
|
dddee35084 | ||
|
|
62a0e5c7d7 | ||
|
|
fd462f66bb | ||
|
|
398d1ef9c1 | ||
|
|
6bad5494f9 | ||
|
|
7876e674b0 | ||
|
|
f870d220ba | ||
|
|
8f7ce8f0e9 | ||
|
|
35cab6537a | ||
|
|
bfcf74aaf0 | ||
|
|
38eedaffe0 | ||
|
|
1e347ca68f | ||
|
|
b405b88862 | ||
|
|
81298faedc | ||
|
|
a64939a86a | ||
|
|
07ffe842bd | ||
|
|
db78fe36b0 | ||
|
|
849d6149bb | ||
|
|
9e664e1a21 | ||
|
|
1b552b84d2 | ||
|
|
42a5f23564 | ||
|
|
ca4f9cd388 | ||
|
|
6e40c84b89 | ||
|
|
058d2d4a60 | ||
|
|
c3ad7f9a37 | ||
|
|
1f0de01c5b | ||
|
|
f767c7109b | ||
|
|
9ae7f9e088 | ||
|
|
866ee54a0b | ||
|
|
4098389254 | ||
|
|
984593109e | ||
|
|
ee60321a03 | ||
|
|
9557a51e28 | ||
|
|
fb5ddc3e9a | ||
|
|
5cb0984e00 | ||
|
|
998a14c878 | ||
|
|
6bf7d78776 | ||
|
|
8be8b4de89 | ||
|
|
a82089990a | ||
|
|
e1c286058c | ||
|
|
7b656c7a9f | ||
|
|
e13cf87f87 | ||
|
|
56c189f406 | ||
|
|
7789268ffb | ||
|
|
9e3f154836 | ||
|
|
76334aed9b | ||
|
|
55590b29e3 | ||
|
|
f7d53e5b4b | ||
|
|
9a51c9b3a4 | ||
|
|
00b9af721e | ||
|
|
c1e265ec2a | ||
|
|
df0bec40b2 | ||
|
|
e4fe37ba3a | ||
|
|
43bd15a93a | ||
|
|
7596710963 | ||
|
|
80f31109ec | ||
|
|
7a3a19a5f7 | ||
|
|
0c810d32ab | ||
|
|
d8eb80efd9 | ||
|
|
59c72ced9b | ||
|
|
ec51286a1e | ||
|
|
b70b3a40df | ||
|
|
2a69930eaa | ||
|
|
ad58591164 | ||
|
|
14826e746d | ||
|
|
389951eeb6 | ||
|
|
03ef856fd3 | ||
|
|
15afc855fc | ||
|
|
f2983a3de5 | ||
|
|
0c7b906afd | ||
|
|
5218893ae7 | ||
|
|
5d77e6f407 | ||
|
|
e7108f6182 | ||
|
|
916e41e424 | ||
|
|
267bac2149 | ||
|
|
3fb0454731 | ||
|
|
1ee4532487 | ||
|
|
997502ef01 | ||
|
|
68839c2447 | ||
|
|
08e77df1a5 | ||
|
|
4036939b9c | ||
|
|
d18b452e3e | ||
|
|
ffff785c09 | ||
|
|
730e697798 | ||
|
|
82a7e33889 | ||
|
|
f58cec3d0d | ||
|
|
f6741c1a9b | ||
|
|
dc5e328b3c | ||
|
|
47f1eaaa09 | ||
|
|
20b03f0f02 | ||
|
|
3fb80ce105 | ||
|
|
1a3fd2c137 | ||
|
|
a3980c4470 | ||
|
|
37a93d7286 | ||
|
|
fe34a9e81f | ||
|
|
6d0a011836 | ||
|
|
567af67ef1 | ||
|
|
671c24b654 | ||
|
|
b239b83267 | ||
|
|
44d2447744 | ||
|
|
7f122c9754 | ||
|
|
3ecdf95c24 | ||
|
|
e3c535d596 | ||
|
|
cc9eee696a | ||
|
|
0fb88da5c2 | ||
|
|
184ed7feab | ||
|
|
53d09262c2 | ||
|
|
aaf8962505 | ||
|
|
c15528bcde | ||
|
|
e1014ef6ef | ||
|
|
b854bf8cf5 | ||
|
|
6cd1b93782 | ||
|
|
103d7563a8 | ||
|
|
4d1dcb72cb | ||
|
|
0b302c5bbe | ||
|
|
07b7592165 | ||
|
|
84c73e4bdf | ||
|
|
716d94c0d8 | ||
|
|
ab21a6f441 |
@ -1,5 +1,12 @@
|
|||||||
export const apiArr = {
|
export const apiArr = {
|
||||||
|
orderList: '/api/v2/wechat/commodity/order', // 商品订单列表
|
||||||
|
afterSalesList: '/api/v2/wechat/commodity/after-sales/list', // 商品订单售后列表
|
||||||
afterSaleCreate: "/api/v2/wechat/commodity/after-sales/refund-info/create", //商品订单售后信息创建
|
afterSaleCreate: "/api/v2/wechat/commodity/after-sales/refund-info/create", //商品订单售后信息创建
|
||||||
cancelOrConfirm: "/api/v2/wechat/commodity/order/cancel_or_confirm", //商品订单确认收货或取消
|
cancelOrConfirm: "/api/v2/wechat/commodity/order/cancel_or_confirm", //商品订单确认收货或取消
|
||||||
isAllow: "/api/v2/wechat/commodity/after-sales/is-allow", //判断订单是否能申请售后
|
isAllow: "/api/v2/wechat/commodity/after-sales/is-allow", //判断订单是否能申请售后
|
||||||
|
revokeApply: "/api/v2/wechat/commodity/after-sales/revoke-apply", //撤销售后申请
|
||||||
|
changeGoodsList: "/api/v2/wechat/commodity/after-sales/change-goods-list", //商品售后换货商品列表
|
||||||
|
updateApply: "/api/v2/wechat/commodity/after-sales/update-apply", //商品订单售后修改申请
|
||||||
|
createReview: "/api/v2/wechat/commodity/review/create", //创建订单评价
|
||||||
|
orderRefund: "/api/v2/wechat/commodity/order/refund", //商品订单退款
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,50 +1,55 @@
|
|||||||
export const apiArr = {
|
export const apiArr = {
|
||||||
isShowSearch: '/api/v1/wechat/home-page/search-enable/info', // 获取搜索框是否显示
|
isShowSearch: "/api/v1/wechat/home-page/search-enable/info", // 获取搜索框是否显示
|
||||||
hotWord: '/api/v1/wechat/home-page/search-hot-word/info', // 获取搜索框热词
|
hotWord: "/api/v1/wechat/home-page/search-hot-word/info", // 获取搜索框热词
|
||||||
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", // 获取社区列表
|
||||||
|
addCar: "/api/v1/wechat/community/car/add", // 添加车辆
|
||||||
|
getCarList: "/api/v1/wechat/community/car/list", //获取车辆列表
|
||||||
|
deleteItem: "/api/v1/wechat/community/car/del", //删除车牌
|
||||||
|
|
||||||
carList: '/api/v1/wechat/community/car/list', // 获取社区列表
|
getBanner: "/api/v1/wechat/home-page/banner-list", //获取banner图
|
||||||
addCar: '/api/v1/wechat/community/car/add', // 添加车辆
|
getButton: "/api/v1/wechat/home-page/button-list", //获取button
|
||||||
getCarList: '/api/v1/wechat/community/car/list', //获取车辆列表
|
getHotWords: "/api/v1/wechat/home-page/search-hot-word/info", //搜索热词
|
||||||
deleteItem: "/api/v1/wechat/community/car/del",//删除车牌
|
|
||||||
|
|
||||||
getBanner: "/api/v1/wechat/home-page/banner-list",//获取banner图
|
getAllList: "/api/v2/wechat/community/get-all-list", //获取小区信息列表
|
||||||
getButton: "/api/v1/wechat/home-page/button-list",//获取button
|
commRoomSelect: "/api/v2/wechat/community-room/comm-room-select", //房源筛选器
|
||||||
getHotWords: "/api/v1/wechat/home-page/search-hot-word/info",//搜索热词
|
|
||||||
|
|
||||||
|
commInfo: "/api/v2/wechat/mpuser-crud/community-owner/info", //我的房产信息小区列表
|
||||||
|
create: "/api/v2/wechat/community-owners/create", //创建新的业主信息
|
||||||
|
|
||||||
getAllList: "/api/v2/wechat/community/get-all-list",//获取小区信息列表
|
communityInfo: "/api/v2/community/get-one", //获取小区信息
|
||||||
commRoomSelect: "/api/v2/wechat/community-room/comm-room-select",//房源筛选器
|
|
||||||
|
|
||||||
commInfo: "/api/v2/wechat/mpuser-crud/community-owner/info",//我的房产信息小区列表
|
workCommunityList: "/api/v2/wechat/community-worker/work-comm-list", //员工小区列表
|
||||||
create: "/api/v2/wechat/community-owners/create",//创建新的业主信息
|
|
||||||
|
|
||||||
communityInfo: "/api/v2/community/get-one",//获取小区信息
|
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", //预下单
|
||||||
|
tradeQuery: "/api/v2/wechat/community-order-pay/trade-query", //缴费查单
|
||||||
|
|
||||||
getOrderList:"/api/v2/wechat/community-orders/get-all-list",//获取账单
|
checkComm: "/api/v2/wechat/community/check-comm", //检查小区是否属于当前用户
|
||||||
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",//预下单
|
|
||||||
};
|
};
|
||||||
7
api/groupPurchase.js
Normal file
7
api/groupPurchase.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
export const apiArr = {
|
||||||
|
groupBuyList: "/api/v2/wechat/commodity/group-buy/list", //团购列表
|
||||||
|
groupGoodsList: "/api/v2/wechat/commodity/group-goods/list", //团购商品列表
|
||||||
|
groupBuyAddress: "/api/v2/wechat/commodity/group-buy/address", //团购自提地址
|
||||||
|
groupBuyRecord: "/api/v2/wechat/commodity/group-buy/buy-record", //团购购买记录
|
||||||
|
groupBuyWriteOff: "/api/v2/wechat/commodity/group-buy/write-off", //团购核销
|
||||||
|
};
|
||||||
@ -1,3 +0,0 @@
|
|||||||
export const apiArr = {
|
|
||||||
orderList: '/api/v2/wechat/commodity/order', // 商品订单列表
|
|
||||||
}
|
|
||||||
22
api/park.js
Normal file
22
api/park.js
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
export const apiArr = {
|
||||||
|
carList: '/api/v2/wechat/smart-parking/car/list', // 车辆列表
|
||||||
|
carAdd: '/api/v2/wechat/smart-parking/car/add', // 车辆添加
|
||||||
|
|
||||||
|
monthCardCreate: '/api/v2/wechat/smart-parking/month-card/create', // 月卡订单创建
|
||||||
|
monthCardOrderList: '/api/v2/wechat/smart-parking/month-card/order/list', // 包月订单列表
|
||||||
|
monthCardOrderPreorder: '/api/v2/wechat/smart-parking/month-card/order/preorder', // 月卡充值预下单
|
||||||
|
monthCardOrderQuery: '/api/v2/wechat/smart-parking/month-card/order/trade_query', // 月卡充值订单交易查询
|
||||||
|
billingRulesList: '/api/v2/wechat/smart-parking/billing-rules/list', // 月卡计费规则列表
|
||||||
|
|
||||||
|
tempParkingCreate: '/api/v2/wechat/smart-parking/temp-parking/create', // 临时车缴费订单创建
|
||||||
|
tempParkingInfo: '/api/v2/wechat/smart-parking/temp-parking/info', // 临时车缴费信息
|
||||||
|
tempParkingOrderDelete: '/api/v2/wechat/smart-parking/temp-parking/order/delete', // 临时车停车订单删除
|
||||||
|
tempParkingOrderInfo: '/api/v2/wechat/smart-parking/temp-parking/order/info', // 临时车停车订单信息
|
||||||
|
tempParkingOrderList: '/api/v2/wechat/smart-parking/temp-parking/order/list', // 临时车停车订单列表
|
||||||
|
tempParkingOrderPreorder: '/api/v2/wechat/smart-parking/temp-parking/preorder', // 临时车缴费订单预下单
|
||||||
|
tempParkingOrderQuery: '/api/v2/wechat/smart-parking/temp-parking/trade_query', // 临时车缴费订单交易查询
|
||||||
|
|
||||||
|
parkList: '/api/v2/wechat/smart-parking/parking/list', // 停车场列表
|
||||||
|
|
||||||
|
deleteCar: '/api/v2/wechat/smart-parking/car/del', // 删除车辆
|
||||||
|
}
|
||||||
@ -12,5 +12,13 @@ export const apiArr = {
|
|||||||
payOrder: "/api/v2/wechat/commodity/order/pay",//支付订单
|
payOrder: "/api/v2/wechat/commodity/order/pay",//支付订单
|
||||||
settingDefaultAddress: '/api/v2/wechat/commodity/receiving_address/default', // 收货地址设置默认
|
settingDefaultAddress: '/api/v2/wechat/commodity/receiving_address/default', // 收货地址设置默认
|
||||||
updateAddress: '/api/v2/wechat/commodity/receiving_address/update', // 收货地址修改
|
updateAddress: '/api/v2/wechat/commodity/receiving_address/update', // 收货地址修改
|
||||||
|
addAddress: '/api/v2/wechat/commodity/receiving_address/add', // 收货地址添加
|
||||||
|
addAddressList: '/api/v2/wechat/commodity/receiving_address', // 收货地址列表
|
||||||
queryOrder: '/api/v2/wechat/commodity/order/trade_query', // 查询订单
|
queryOrder: '/api/v2/wechat/commodity/order/trade_query', // 查询订单
|
||||||
|
getComment: '/api/v2/wechat/commodity/review/list', // 获取评论
|
||||||
|
|
||||||
|
mergePreorder: '/api/v2/wechat/commodity/order/preorder', // 商品订单合并预下单
|
||||||
|
|
||||||
|
goodsSearch: '/api/v2/wechat/commodity/search', // 商品搜索
|
||||||
|
cancelPay: '/api/v2/wechat/commodity/order/cancel_pay', // 用户取消支付
|
||||||
}
|
}
|
||||||
5
app.miniapp.json
Normal file
5
app.miniapp.json
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"adapteByMiniprogram": {
|
||||||
|
"userName": "gh_ca4a91c192dd"
|
||||||
|
}
|
||||||
|
}
|
||||||
282
components/cu-keyboard/cu-keyboard.vue
Normal file
282
components/cu-keyboard/cu-keyboard.vue
Normal file
@ -0,0 +1,282 @@
|
|||||||
|
<template>
|
||||||
|
<view class="key-container" @click="hide" v-show="showMask">
|
||||||
|
<uni-transition :modeClass="['slide-bottom']" :show="show"
|
||||||
|
:styles="{height:'100vh'}"
|
||||||
|
:duration="duration">
|
||||||
|
<view class="key-content" @click.stop>
|
||||||
|
<slot></slot>
|
||||||
|
<view class="key-box block flex">
|
||||||
|
<view class="key-left">
|
||||||
|
<view class="key-top flex flex-wrap">
|
||||||
|
<view class="btn-box" v-for="(item,index) in numArr" :key="index">
|
||||||
|
<button hover-class="active" class="cu-btn key-btn text-black text-xl" @click.stop="keydown(item)">{{item}}</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="key-bottom">
|
||||||
|
<view class="btn-zero">
|
||||||
|
<button hover-class="active" class="cu-btn key-btn text-black text-xl" @click.stop="keydown('0')">0</button>
|
||||||
|
</view>
|
||||||
|
<view class="btn-point">
|
||||||
|
<button hover-class="active" class="cu-btn key-btn text-black text-xl" @click.stop="keydown('.')">.</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="key-right">
|
||||||
|
<view class="del">
|
||||||
|
<button hover-class="active" class="cu-btn key-btn text-black text-xl" @click.stop="del">
|
||||||
|
<text class="zm iconbackspace text-xl"></text>
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
<view class="confirm">
|
||||||
|
<button hover-class="active" :style="[confirmStyle]" class="cu-btn" @click.stop="confirm">
|
||||||
|
<text class="confirm-text">{{confirmText}}</text>
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-transition>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* 付款组件
|
||||||
|
* @property {Number} duration - 弹出动画时长,默认为300
|
||||||
|
* @event {Function} change - 数字改变触发,参数为数字
|
||||||
|
* @event {Function} confirm - 付款时触发,参数为数字
|
||||||
|
* @event {Function} hide - 关闭键盘触发,参数为空
|
||||||
|
*/
|
||||||
|
// 使用方法,查看同级目录exmple
|
||||||
|
import uniTransition from '../uni-transition/uni-transition.vue'
|
||||||
|
export default{
|
||||||
|
components:{
|
||||||
|
uniTransition
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
duration:{
|
||||||
|
type:Number,//弹出动画时常
|
||||||
|
default:300
|
||||||
|
},
|
||||||
|
confirmText:{
|
||||||
|
type:String,
|
||||||
|
default:'付款'
|
||||||
|
},
|
||||||
|
confirmStyle:{
|
||||||
|
type:Object,
|
||||||
|
default:()=>{
|
||||||
|
return{
|
||||||
|
backgroundColor:'#57BE6D'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
value:'',//输出的值
|
||||||
|
show:false,//显示键盘
|
||||||
|
showMask:false,//遮罩层
|
||||||
|
numArr:[1,2,3,4,5,6,7,8,9]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
watch:{
|
||||||
|
value(newval,oldval){
|
||||||
|
this.$emit("change",newval);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
close(){
|
||||||
|
this.show = false;
|
||||||
|
setTimeout(()=>{
|
||||||
|
this.showMask = false;
|
||||||
|
},this.duration)
|
||||||
|
},
|
||||||
|
open(){
|
||||||
|
this.value = '';
|
||||||
|
this.show = true;
|
||||||
|
this.showMask = true;
|
||||||
|
},
|
||||||
|
del(){
|
||||||
|
if(this.value.length){
|
||||||
|
this.value = this.value.slice(0,this.value.length-1);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
keydown(e){
|
||||||
|
switch(e){
|
||||||
|
case '.':
|
||||||
|
// 当输入为点的时候,如果第一次输入点,则补零
|
||||||
|
if(!this.value.length){
|
||||||
|
this.value = '0.';
|
||||||
|
}else{
|
||||||
|
if(this.value.indexOf('.')>-1){
|
||||||
|
// 如果已经有点,则无效
|
||||||
|
}else{
|
||||||
|
this.value = this.value+''+e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case '0':
|
||||||
|
if(this.value.length === 0){
|
||||||
|
this.value = this.value+''+e;
|
||||||
|
}
|
||||||
|
if(Number(this.value) === 0 && this.value.indexOf('.')== -1){
|
||||||
|
// 当输入为零的时候,如果value转换成数字为零,且没有点则无效
|
||||||
|
}else{
|
||||||
|
this.value = this.value+''+e;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
this.value = this.value+''+e;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
hide(){
|
||||||
|
this.$emit('hide');
|
||||||
|
this.close();
|
||||||
|
},
|
||||||
|
confirm(){
|
||||||
|
this.$emit('confirm',this.value);
|
||||||
|
this.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@font-face {
|
||||||
|
font-family: 'zm'; /* project id 2442084 */
|
||||||
|
src: url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.eot');
|
||||||
|
src: url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.woff2') format('woff2'),
|
||||||
|
url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.woff') format('woff'),
|
||||||
|
url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.ttf') format('truetype'),
|
||||||
|
url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.svg#zm') format('svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.zm {
|
||||||
|
font-family: "zm" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconbackspace:before {
|
||||||
|
content: "\ef11";
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.flex-wrap{
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.cu-btn {
|
||||||
|
position: relative;
|
||||||
|
border: 0rpx;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
line-height: 1;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
overflow: visible;
|
||||||
|
margin-left: initial;
|
||||||
|
transform: translate(0rpx, 0rpx);
|
||||||
|
margin-right: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-btn::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.text-xl{
|
||||||
|
font-size:36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: 'microsoft-yahei';
|
||||||
|
}
|
||||||
|
.text-black{
|
||||||
|
color:#333;
|
||||||
|
}
|
||||||
|
.active{
|
||||||
|
background-color: #ddd !important;
|
||||||
|
transform: translate(2rpx,2rpx);
|
||||||
|
}
|
||||||
|
.key-container{
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
top:0;
|
||||||
|
left:0;
|
||||||
|
right:0;
|
||||||
|
.key-content{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100vw;
|
||||||
|
background-color: #F7F7F7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.key-box{
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding:10rpx 10rpx 0;
|
||||||
|
.key-left{
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
.key-right{
|
||||||
|
width: 25%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.key-bottom{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.del{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.btn-box{
|
||||||
|
width: 33.33%;
|
||||||
|
padding:0 10rpx 10rpx 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.btn-zero{
|
||||||
|
width: 66.66%;
|
||||||
|
padding:0 10rpx 10rpx 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.btn-point{
|
||||||
|
width: 33.33%;
|
||||||
|
padding:0 10rpx 10rpx 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.key-right{
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.key-btn{
|
||||||
|
background-color: #fff;
|
||||||
|
width: 100%;
|
||||||
|
height: 90rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm{
|
||||||
|
width: 100%;
|
||||||
|
flex:1;
|
||||||
|
padding: 10rpx 0 10rpx 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
button{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
.confirm-text{
|
||||||
|
color:#fff;
|
||||||
|
display: block;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
41
components/cu-keyboard/exmple.vue
Normal file
41
components/cu-keyboard/exmple.vue
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<button type="default" @click="open">打开键盘</button>
|
||||||
|
{{value}}
|
||||||
|
<cu-keyboard ref="cukeyboard" @change="change" @confirm="confirm" @hide="hide"></cu-keyboard>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value:''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
change(e){
|
||||||
|
this.value = e;
|
||||||
|
console.log("数字改变",e);
|
||||||
|
},
|
||||||
|
open(){
|
||||||
|
console.log("打开键盘");
|
||||||
|
this.$refs.cukeyboard.open();
|
||||||
|
},
|
||||||
|
confirm(e){
|
||||||
|
console.log("付款",e);
|
||||||
|
},
|
||||||
|
hide(){
|
||||||
|
console.log("关闭键盘")
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -1,6 +1,6 @@
|
|||||||
.foot-fixed {
|
.foot-fixed {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: -1px;
|
bottom: -10px;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
@ -8,6 +8,7 @@
|
|||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border-top: 1px solid #E8E8E8;
|
border-top: 1px solid #E8E8E8;
|
||||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
|
||||||
|
/* height: 8%; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.foot-fixed .foot-item {
|
.foot-fixed .foot-item {
|
||||||
|
|||||||
@ -67,7 +67,7 @@ export default {
|
|||||||
photoAc:
|
photoAc:
|
||||||
"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_facilityAc.png",
|
"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_facilityAc.png",
|
||||||
nav_name: "智能设备",
|
nav_name: "智能设备",
|
||||||
url: "",
|
url: "/packages/smartDevice/index/index",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
photo:
|
photo:
|
||||||
@ -161,6 +161,25 @@ export default {
|
|||||||
|
|
||||||
jump(e) {
|
jump(e) {
|
||||||
const url = e.currentTarget.dataset.url;
|
const url = e.currentTarget.dataset.url;
|
||||||
|
const index = e.currentTarget.dataset.idx;
|
||||||
|
const item = this.navList[index];
|
||||||
|
|
||||||
|
// 检查是否为扫码功能
|
||||||
|
if (item.isScan) {
|
||||||
|
// 调用uni-app的扫码API
|
||||||
|
uni.scanCode({
|
||||||
|
success: (res) => {
|
||||||
|
// 扫码成功后的处理逻辑
|
||||||
|
console.log('扫码结果:', res.result);
|
||||||
|
// 可以根据实际需求对扫码结果进行处理
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.log('扫码失败:', err);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// 检查url是否存在且不为空
|
// 检查url是否存在且不为空
|
||||||
if (!url || url.trim() === '') {
|
if (!url || url.trim() === '') {
|
||||||
this.NotOpen();
|
this.NotOpen();
|
||||||
|
|||||||
@ -39,23 +39,26 @@
|
|||||||
this.address = uni.getStorageSync('city');
|
this.address = uni.getStorageSync('city');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
uni.request({
|
this.qqmap_key = '55NBZ-MUQYW-EAJRL-YIWPA-ZXCR6-4NBPP';
|
||||||
url: apiArr.get_host_info,
|
|
||||||
method: 'post',
|
|
||||||
header: {
|
|
||||||
'Content-type': 'application/x-www-form-urlencoded'
|
|
||||||
},
|
|
||||||
dataType: 'json',
|
|
||||||
success: (result) => {
|
|
||||||
console.log(result, 'result');
|
|
||||||
let wxapp = result.data.all.wxapp;
|
|
||||||
|
|
||||||
if (wxapp) {
|
|
||||||
this.qqmap_key = wxapp.qqmap_key;
|
|
||||||
this.getUserLocation()
|
this.getUserLocation()
|
||||||
}
|
|
||||||
},
|
// uni.request({
|
||||||
})
|
// url: apiArr.get_host_info,
|
||||||
|
// method: 'post',
|
||||||
|
// header: {
|
||||||
|
// 'Content-type': 'application/x-www-form-urlencoded'
|
||||||
|
// },
|
||||||
|
// dataType: 'json',
|
||||||
|
// success: (result) => {
|
||||||
|
// console.log(result, 'result');
|
||||||
|
// let wxapp = result.data.all.wxapp;
|
||||||
|
|
||||||
|
// if (wxapp) {
|
||||||
|
// this.qqmap_key = wxapp.qqmap_key;
|
||||||
|
// this.getUserLocation()
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// })
|
||||||
},
|
},
|
||||||
|
|
||||||
getUserLocation() {
|
getUserLocation() {
|
||||||
|
|||||||
279
components/uni-transition/uni-transition.vue
Normal file
279
components/uni-transition/uni-transition.vue
Normal file
@ -0,0 +1,279 @@
|
|||||||
|
<template>
|
||||||
|
<view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]" :style="'transform:' +transform+';'+stylesObject"
|
||||||
|
@click="change">
|
||||||
|
<slot></slot>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
const animation = uni.requireNativePlugin('animation');
|
||||||
|
// #endif
|
||||||
|
/**
|
||||||
|
* Transition 过渡动画
|
||||||
|
* @description 简单过渡动画组件
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
|
||||||
|
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
|
||||||
|
* @property {Array} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
|
||||||
|
* @value fade 渐隐渐出过渡
|
||||||
|
* @value slide-top 由上至下过渡
|
||||||
|
* @value slide-right 由右至左过渡
|
||||||
|
* @value slide-bottom 由下至上过渡
|
||||||
|
* @value slide-left 由左至右过渡
|
||||||
|
* @value zoom-in 由小到大过渡
|
||||||
|
* @value zoom-out 由大到小过渡
|
||||||
|
* @property {Number} duration 过渡动画持续时间
|
||||||
|
* @property {Object} styles 组件样式,同 css 样式,注意带’-‘连接符的属性需要使用小驼峰写法如:`backgroundColor:red`
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'uniTransition',
|
||||||
|
props: {
|
||||||
|
show: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
modeClass: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
duration: {
|
||||||
|
type: Number,
|
||||||
|
default: 300
|
||||||
|
},
|
||||||
|
styles: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isShow: false,
|
||||||
|
transform: '',
|
||||||
|
ani: { in: '',
|
||||||
|
active: ''
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
show: {
|
||||||
|
handler(newVal) {
|
||||||
|
if (newVal) {
|
||||||
|
this.open()
|
||||||
|
} else {
|
||||||
|
this.close()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
stylesObject() {
|
||||||
|
let styles = {
|
||||||
|
...this.styles,
|
||||||
|
'transition-duration': this.duration / 1000 + 's'
|
||||||
|
}
|
||||||
|
let transfrom = ''
|
||||||
|
for (let i in styles) {
|
||||||
|
let line = this.toLine(i)
|
||||||
|
transfrom += line + ':' + styles[i] + ';'
|
||||||
|
}
|
||||||
|
return transfrom
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// this.timer = null
|
||||||
|
// this.nextTick = (time = 50) => new Promise(resolve => {
|
||||||
|
// clearTimeout(this.timer)
|
||||||
|
// this.timer = setTimeout(resolve, time)
|
||||||
|
// return this.timer
|
||||||
|
// });
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
change() {
|
||||||
|
this.$emit('click', {
|
||||||
|
detail: this.isShow
|
||||||
|
})
|
||||||
|
},
|
||||||
|
open() {
|
||||||
|
clearTimeout(this.timer)
|
||||||
|
this.isShow = true
|
||||||
|
this.transform = ''
|
||||||
|
this.ani.in = ''
|
||||||
|
for (let i in this.getTranfrom(false)) {
|
||||||
|
if (i === 'opacity') {
|
||||||
|
this.ani.in = 'fade-in'
|
||||||
|
} else {
|
||||||
|
this.transform += `${this.getTranfrom(false)[i]} `
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.$nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
this._animation(true)
|
||||||
|
}, 50)
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
close(type) {
|
||||||
|
clearTimeout(this.timer)
|
||||||
|
this._animation(false)
|
||||||
|
},
|
||||||
|
_animation(type) {
|
||||||
|
let styles = this.getTranfrom(type)
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
if(!this.$refs['ani']) return
|
||||||
|
animation.transition(this.$refs['ani'].ref, {
|
||||||
|
styles,
|
||||||
|
duration: this.duration, //ms
|
||||||
|
timingFunction: 'ease',
|
||||||
|
needLayout: false,
|
||||||
|
delay: 0 //ms
|
||||||
|
}, () => {
|
||||||
|
if (!type) {
|
||||||
|
this.isShow = false
|
||||||
|
}
|
||||||
|
this.$emit('change', {
|
||||||
|
detail: this.isShow
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
this.transform = ''
|
||||||
|
for (let i in styles) {
|
||||||
|
if (i === 'opacity') {
|
||||||
|
this.ani.in = `fade-${type?'out':'in'}`
|
||||||
|
} else {
|
||||||
|
this.transform += `${styles[i]} `
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.timer = setTimeout(() => {
|
||||||
|
if (!type) {
|
||||||
|
this.isShow = false
|
||||||
|
}
|
||||||
|
this.$emit('change', {
|
||||||
|
detail: this.isShow
|
||||||
|
})
|
||||||
|
|
||||||
|
}, this.duration)
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
},
|
||||||
|
getTranfrom(type) {
|
||||||
|
let styles = {
|
||||||
|
transform: ''
|
||||||
|
}
|
||||||
|
this.modeClass.forEach((mode) => {
|
||||||
|
switch (mode) {
|
||||||
|
case 'fade':
|
||||||
|
styles.opacity = type ? 1 : 0
|
||||||
|
break;
|
||||||
|
case 'slide-top':
|
||||||
|
styles.transform += `translateY(${type?'0':'-100%'}) `
|
||||||
|
break;
|
||||||
|
case 'slide-right':
|
||||||
|
styles.transform += `translateX(${type?'0':'100%'}) `
|
||||||
|
break;
|
||||||
|
case 'slide-bottom':
|
||||||
|
styles.transform += `translateY(${type?'0':'100%'}) `
|
||||||
|
break;
|
||||||
|
case 'slide-left':
|
||||||
|
styles.transform += `translateX(${type?'0':'-100%'}) `
|
||||||
|
break;
|
||||||
|
case 'zoom-in':
|
||||||
|
styles.transform += `scale(${type?1:0.8}) `
|
||||||
|
break;
|
||||||
|
case 'zoom-out':
|
||||||
|
styles.transform += `scale(${type?1:1.2}) `
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return styles
|
||||||
|
},
|
||||||
|
_modeClassArr(type) {
|
||||||
|
let mode = this.modeClass
|
||||||
|
if (typeof(mode) !== "string") {
|
||||||
|
let modestr = ''
|
||||||
|
mode.forEach((item) => {
|
||||||
|
modestr += (item + '-' + type + ',')
|
||||||
|
})
|
||||||
|
return modestr.substr(0, modestr.length - 1)
|
||||||
|
} else {
|
||||||
|
return mode + '-' + type
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// getEl(el) {
|
||||||
|
// console.log(el || el.ref || null);
|
||||||
|
// return el || el.ref || null
|
||||||
|
// },
|
||||||
|
toLine(name) {
|
||||||
|
return name.replace(/([A-Z])/g, "-$1").toLowerCase();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.uni-transition {
|
||||||
|
transition-timing-function: ease;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
transition-property: transform, opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-in {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-active {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-top-in {
|
||||||
|
/* transition-property: transform, opacity; */
|
||||||
|
transform: translateY(-100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-top-active {
|
||||||
|
transform: translateY(0);
|
||||||
|
/* opacity: 1; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-right-in {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-right-active {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-bottom-in {
|
||||||
|
transform: translateY(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-bottom-active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-left-in {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-left-active {
|
||||||
|
transform: translateX(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoom-in-in {
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoom-out-active {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoom-out-in {
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
11
i18n/base.json
Normal file
11
i18n/base.json
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"ios": {
|
||||||
|
"name": "石榴九九"
|
||||||
|
},
|
||||||
|
"android": {
|
||||||
|
"name": "石榴九九"
|
||||||
|
},
|
||||||
|
"common": {
|
||||||
|
"name": "石榴九九"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -57,7 +57,7 @@
|
|||||||
},
|
},
|
||||||
"oauth" : {
|
"oauth" : {
|
||||||
"weixin" : {
|
"weixin" : {
|
||||||
"appid" : "wxb4018c78fa143450",
|
"appid" : "wx1addb25675dd8e70",
|
||||||
"UniversalLinks" : ""
|
"UniversalLinks" : ""
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -68,7 +68,7 @@
|
|||||||
"quickapp" : {},
|
"quickapp" : {},
|
||||||
/* 小程序特有相关 */
|
/* 小程序特有相关 */
|
||||||
"mp-weixin" : {
|
"mp-weixin" : {
|
||||||
"appid" : "wxb4018c78fa143450",
|
"appid" : "wx1addb25675dd8e70",
|
||||||
"setting" : {
|
"setting" : {
|
||||||
"urlCheck" : false
|
"urlCheck" : false
|
||||||
},
|
},
|
||||||
|
|||||||
1406
package-lock.json
generated
1406
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
22
package.json
22
package.json
@ -1,9 +1,19 @@
|
|||||||
{
|
{
|
||||||
"devDependencies": {
|
"id": "cu-keyboard",
|
||||||
"sass-loader": "^16.0.5"
|
"name": "支付键盘、数字键盘、付款键盘、密码键盘",
|
||||||
},
|
"displayName": "支付键盘、数字键盘、付款键盘、密码键盘",
|
||||||
"dependencies": {
|
"version": "1.0.1",
|
||||||
"sass": "^1.89.2",
|
"description": "仿微信支付付款键盘,多端通用,简易方便",
|
||||||
"uview-ui": "^2.0.38"
|
"keywords": [
|
||||||
|
"数字键盘",
|
||||||
|
"支付键盘",
|
||||||
|
"付款键盘",
|
||||||
|
"密码键盘"
|
||||||
|
],
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -201,7 +201,7 @@ export default {
|
|||||||
? this.city.ad_code
|
? this.city.ad_code
|
||||||
: uni.getStorageSync("ad_code"),
|
: uni.getStorageSync("ad_code"),
|
||||||
page_num: this.page_num,
|
page_num: this.page_num,
|
||||||
page_size: this.page_size,
|
page_size: 9999,
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
console.log(res.rows);
|
console.log(res.rows);
|
||||||
this.communityList = res.rows;
|
this.communityList = res.rows;
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
page {
|
page {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
padding-bottom: 120rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty {
|
.empty {
|
||||||
@ -106,6 +107,18 @@ image {
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.swiperBox_no1 {
|
||||||
|
height: 300rpx;
|
||||||
|
width: 710rpx;
|
||||||
|
position: relative;
|
||||||
|
margin-top: 170rpx;
|
||||||
|
margin: 170rpx auto 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiperBox_no_img{
|
||||||
|
border-radius: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.swiperBox1 swiper {
|
.swiperBox1 swiper {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
@ -154,6 +167,12 @@ image {
|
|||||||
margin-top: -96rpx;
|
margin-top: -96rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.swiperBox_no2 {
|
||||||
|
height: 150rpx;
|
||||||
|
width: 710rpx;
|
||||||
|
margin: 0 auto;;
|
||||||
|
}
|
||||||
|
|
||||||
.funcList {
|
.funcList {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -226,7 +245,7 @@ image {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.newsList {
|
.newsList {
|
||||||
margin-bottom: 100rpx;
|
margin-bottom: 30rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.newsItem {
|
.newsItem {
|
||||||
@ -270,7 +289,7 @@ image {
|
|||||||
color: #999999;
|
color: #999999;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: #f6f6fa;
|
background-color: #f6f6fa;
|
||||||
padding: 40rpx;
|
/* padding: 40rpx; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.bigAds {
|
.bigAds {
|
||||||
|
|||||||
@ -1,21 +1,59 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<view class="container">
|
||||||
<div class="empty" v-if="communityList.length == 0">
|
<!-- <view class="empty" v-if="communityList.length == 0">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_newEmpty.png" alt="" />
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_newEmpty.png" alt="" />
|
||||||
<text>当前账户未绑定任何项目房源信息</text>
|
<text>当前账户未绑定任何项目房源信息</text>
|
||||||
<button class="emptyBtn" @click="addCommunity">新增房产绑定</button>
|
<button class="emptyBtn" @click="addCommunity">新增房产绑定</button>
|
||||||
<!-- <button class="emptyBtn2" @click="refresh">刷新</button> -->
|
</view> -->
|
||||||
</div>
|
|
||||||
<div v-else>
|
|
||||||
<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
|
||||||
<div class="searchBox_add">
|
|
||||||
<div class="emptyCommunity" @click="addCommunity">
|
|
||||||
{{ communityVal }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="swiperBox1">
|
<view v-if="communityList.length == 0">
|
||||||
|
<view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||||||
|
<view class="searchBox_add">
|
||||||
|
<view class="emptyCommunity" @click="addCommunity">
|
||||||
|
{{ communityVal }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="swiperBox_no1">
|
||||||
|
<swiper @animationfinish="swipers" autoplay circular>
|
||||||
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community_no_image1.png" mode="aspectFill"
|
||||||
|
class="swiperBox_no_img" @click="addCommunity" />
|
||||||
|
</swiper>
|
||||||
|
|
||||||
|
<view class="dot">
|
||||||
|
<view :class="['dotItem', currentIdx == index ? 'active' : '']" v-for="(item, index) in bannerList"
|
||||||
|
:key="index">
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="swiperBox_no2">
|
||||||
|
<swiper @animationfinish="swipers" autoplay circular>
|
||||||
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community_no_image2.png" mode="aspectFill"
|
||||||
|
class="swiperBox_no_img" @click="addCommunity" />
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="funcList">
|
||||||
|
<u-grid :col="5" :border="false">
|
||||||
|
<u-grid-item v-for="(item, index) in noValFunctionList" @click="addCommunity" :key="index">
|
||||||
|
<image class="grid_Pic" :src="item.nav_icon" mode=""></image>
|
||||||
|
<text class="grid_Text">{{ item.nav_name }}</text>
|
||||||
|
</u-grid-item>
|
||||||
|
</u-grid>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-else>
|
||||||
|
<view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||||||
|
<view class="searchBox_add">
|
||||||
|
<view class="emptyCommunity" @click="addCommunity">
|
||||||
|
{{ communityVal }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="swiperBox1">
|
||||||
<swiper @animationfinish="swipers" autoplay circular>
|
<swiper @animationfinish="swipers" autoplay circular>
|
||||||
<swiper-item v-for="(item, index) in bannerList" :key="index" @click="headerServerClick(item)">
|
<swiper-item v-for="(item, index) in bannerList" :key="index" @click="headerServerClick(item)">
|
||||||
<image :src="item.ad_picture" mode="aspectFill" />
|
<image :src="item.ad_picture" mode="aspectFill" />
|
||||||
@ -27,15 +65,15 @@
|
|||||||
:key="index">
|
:key="index">
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="swiperBox2">
|
<view class="swiperBox2">
|
||||||
<swiper @animationfinish="swipers" autoplay circular>
|
<swiper @animationfinish="swipers" autoplay circular>
|
||||||
<swiper-item v-for="(item, index) in streamerList" :key="index" @click="headerServerClick(item)">
|
<swiper-item v-for="(item, index) in streamerList" :key="index" @click="headerServerClick(item)">
|
||||||
<image :src="item.ad_picture" mode="aspectFill" class="swiperBox2_img" />
|
<image :src="item.ad_picture" mode="aspectFill" class="swiperBox2_img" />
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
</swiper>
|
</swiper>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<view class="funcList">
|
<view class="funcList">
|
||||||
<u-grid :col="rowNum" :border="false">
|
<u-grid :col="rowNum" :border="false">
|
||||||
@ -46,66 +84,66 @@
|
|||||||
</u-grid>
|
</u-grid>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<div v-for="(item, index) in tileList" :key="index" :class="['ads', index == 0 ? 'ads_first' : '']"
|
<view v-for="(item, index) in tileList" :key="index" :class="['ads', index == 0 ? 'ads_first' : '']"
|
||||||
@click="headerServerClick(item)">
|
@click="headerServerClick(item)">
|
||||||
<image :src="item.ad_picture" mode="aspectFill" />
|
<image :src="item.ad_picture" mode="aspectFill" />
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="tabs">
|
<view class="tabs" v-if="categoryList.length > 0">
|
||||||
<div v-for="(item, index) in categoryList" :key="index"
|
<view v-for="(item, index) in categoryList" :key="index"
|
||||||
:class="['tabItem', selectedTab === index ? 'active2' : '']" @click="selectTab(index, item)">
|
:class="['tabItem', selectedTab === index ? 'active2' : '']" @click="selectTab(index, item)">
|
||||||
{{ item.category_name }}
|
{{ item.category_name }}
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="newsList">
|
<view class="newsList" v-if="categoryList.length > 0">
|
||||||
<div class="newsItem" v-for="item in infoList" @click="detail(item)" :key="item.id">
|
<view class="newsItem" v-for="item in infoList" @click="detail(item)" :key="item.id">
|
||||||
<div class="newsItem_left">
|
<view class="newsItem_left">
|
||||||
<div class="newsItem_left_tit">{{ item.title }}</div>
|
<view class="newsItem_left_tit">{{ item.title }}</view>
|
||||||
<div class="newsItem_left_sub">{{ item.author }}</div>
|
<view class="newsItem_left_sub">{{ item.author }}</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="newsItem_right">
|
<view class="newsItem_right">
|
||||||
<image :src="item.list_image" mode="aspectFill" />
|
<image :src="item.list_image" mode="aspectFill" />
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="tips">{{ loadMoreText }}</div>
|
<view class="tips">{{ loadMoreText }}</view>
|
||||||
|
|
||||||
<div class="bigAds" v-if="ads1Show">
|
<view class="bigAds" v-if="ads1Show">
|
||||||
<div class="bigAdsCon">
|
<view class="bigAdsCon">
|
||||||
<div class="bigAdsCon_img">
|
<view class="bigAdsCon_img">
|
||||||
<swiper @animationfinish="swipers" autoplay circular>
|
<swiper @animationfinish="swipers" autoplay circular>
|
||||||
<swiper-item v-for="(item, index) in largePopList" :key="index" @click="headerServerClick(item)">
|
<swiper-item v-for="(item, index) in largePopList" :key="index" @click="headerServerClick(item)">
|
||||||
<image :src="item.ad_picture" mode="aspectFill" />
|
<image :src="item.ad_picture" mode="aspectFill" />
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
</swiper>
|
</swiper>
|
||||||
</div>
|
</view>
|
||||||
<div class="close" @click="closeAds">
|
<view class="close" @click="closeAds">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_close.png">
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_close.png">
|
||||||
</image>
|
</image>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="bigAds" v-if="ads2Show">
|
<view class="bigAds" v-if="ads2Show">
|
||||||
<div class="bigAdsCon2">
|
<view class="bigAdsCon2">
|
||||||
<div class="bigAdsCon2_img">
|
<view class="bigAdsCon2_img">
|
||||||
<swiper :current="currentSwiperIndex" @change="onSwiperChange" @animationfinish="swipers" autoplay circular>
|
<swiper :current="currentSwiperIndex" @change="onSwiperChange" @animationfinish="swipers" autoplay circular>
|
||||||
<swiper-item v-for="(item, index) in popList" :key="index">
|
<swiper-item v-for="(item, index) in popList" :key="index">
|
||||||
<image :src="item.ad_picture" mode="aspectFill" />
|
<image :src="item.ad_picture" mode="aspectFill" />
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
</swiper>
|
</swiper>
|
||||||
</div>
|
</view>
|
||||||
<div class="AdsBtnList">
|
<view class="AdsBtnList">
|
||||||
<div class="AdsBtnItem1" @click="closeAds2">取消</div>
|
<view class="AdsBtnItem1" @click="closeAds2">取消</view>
|
||||||
<div class="AdsBtnItem2" @click="onDetailClick">了解详情</div>
|
<view class="AdsBtnItem2" @click="onDetailClick">了解详情</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
<nav-footer :current="3" />
|
<nav-footer :current="3" />
|
||||||
</div>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -134,7 +172,50 @@ export default {
|
|||||||
communityList: [],
|
communityList: [],
|
||||||
flag: false,
|
flag: false,
|
||||||
|
|
||||||
|
defaultFunctionList: [],
|
||||||
functionList: [],
|
functionList: [],
|
||||||
|
noValFunctionList: [
|
||||||
|
{
|
||||||
|
nav_icon: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/noValFunction1.png',
|
||||||
|
nav_name: "物业介绍",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
nav_icon: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/noValFunction2.png',
|
||||||
|
nav_name: "物业缴费",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
nav_icon: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/noValFunction3.png',
|
||||||
|
nav_name: "物业公积金",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
nav_icon: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/noValFunction1.png',
|
||||||
|
nav_name: "物业保修",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
nav_icon: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/noValFunction4.png',
|
||||||
|
nav_name: "便民电话",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
nav_icon: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/noValFunction5.png',
|
||||||
|
nav_name: "人脸门禁",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
nav_icon: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/noValFunction6.png',
|
||||||
|
nav_name: "手机开门",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
nav_icon: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/noValFunction7.png',
|
||||||
|
nav_name: "物业活动",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
nav_icon: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/noValFunction8.png',
|
||||||
|
nav_name: "访客邀请",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
nav_icon: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/noValFunction10.png',
|
||||||
|
nav_name: "场地预约",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
ads1Show: false,
|
ads1Show: false,
|
||||||
ads2Show: false,
|
ads2Show: false,
|
||||||
@ -164,59 +245,72 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
async onLoad(options) {
|
async onLoad(options) {
|
||||||
// 页面加载时执行一次
|
if (options.item) {
|
||||||
|
this.checkComm(JSON.parse(options.item));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onHide() {
|
||||||
|
uni.removeStorageSync("is_me");
|
||||||
|
},
|
||||||
|
onUnload() {
|
||||||
|
uni.removeStorageSync("is_me");
|
||||||
},
|
},
|
||||||
|
|
||||||
async onShow() {
|
async onShow() {
|
||||||
// 页面展示时执行
|
|
||||||
// if (!uni.getStorageSync("changeCommData")) {
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
await request(apiArr2.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) => {
|
|
||||||
if (res.rows.length == 0) {
|
|
||||||
uni.removeStorageSync("changeCommData");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const targetItem = res.rows.find((item) => {
|
|
||||||
return item.community_id == uni.getStorageSync("changeCommData").id;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (targetItem) {
|
|
||||||
//是否跳转物业缴费
|
|
||||||
this.isShowBill = targetItem.bill_front_end_display == 1;
|
|
||||||
//小区是否隐藏
|
|
||||||
if (targetItem.front_end_display == 1) {
|
|
||||||
uni.removeStorageSync("changeCommData");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
res.rows = res.rows.filter((item) => {
|
|
||||||
return item.front_end_display != 1;
|
|
||||||
});
|
|
||||||
console.log("🚀 ~ onLoad ~ res.rows:", res.rows)
|
|
||||||
if (!uni.getStorageSync("changeCommData")) {
|
|
||||||
uni.setStorageSync("changeCommData", { name: res.rows[0].name, id: res.rows[0].community_id })
|
|
||||||
uni.setStorageSync("isShowNav", res.rows[0].room_owner_list[0].type)
|
|
||||||
}
|
|
||||||
this.communityList = res.rows;
|
|
||||||
});
|
|
||||||
const meun = menuButtonInfo();
|
const meun = menuButtonInfo();
|
||||||
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.getCommunityList()
|
this.defaultFunctionList = [
|
||||||
if (this.communityList.length == 0) {
|
{
|
||||||
this.communityVal = "添加我的房产";
|
create_time: "",
|
||||||
} else {
|
id: 4,
|
||||||
console.log("🚀 ~ onLoad ~ this.communityList:", this.communityList)
|
is_published: 1,
|
||||||
this.communityVal = uni.getStorageSync("changeCommData").name;
|
jump_target: 1,
|
||||||
|
mini_program_url: "/packages/community/repairList/index",
|
||||||
|
nav_icon: picUrl + "/static/images/2025-07-05/db3s1b1lyxawt8cnke.png",
|
||||||
|
nav_name: "报事报修",
|
||||||
|
other_appid: "",
|
||||||
|
other_path: "",
|
||||||
|
sort: 5,
|
||||||
|
update_time: "",
|
||||||
|
visible_communities: ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
create_time: "",
|
||||||
|
id: 5,
|
||||||
|
is_published: 1,
|
||||||
|
jump_target: 1,
|
||||||
|
mini_program_url: "/packages/community/propertyPayment/index",
|
||||||
|
nav_icon: picUrl + "/static/images/2025-07-05/db3s1t7d1k0qmuha61.png",
|
||||||
|
nav_name: "物业缴费",
|
||||||
|
other_appid: "",
|
||||||
|
other_path: "",
|
||||||
|
sort: 4,
|
||||||
|
update_time: "",
|
||||||
|
visible_communities: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
create_time: "",
|
||||||
|
id: 7,
|
||||||
|
is_published: 1,
|
||||||
|
jump_target: 1,
|
||||||
|
mini_program_url: "/packages/community/providentFund/index",
|
||||||
|
nav_icon: picUrl + "/static/images/2025-07-05/db3s29e33rd7rsrecf.png",
|
||||||
|
nav_name: "物业公积金",
|
||||||
|
other_appid: "",
|
||||||
|
other_path: "",
|
||||||
|
sort: 2,
|
||||||
|
update_time: "",
|
||||||
|
visible_communities: ""
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
const isMe = uni.getStorageSync("is_me");
|
||||||
|
// 当is_me不存在或为true时执行,存在且为false时不执行
|
||||||
|
if (isMe === true || isMe === undefined || isMe === null || isMe === '') {
|
||||||
|
await this.getCommunityList();
|
||||||
}
|
}
|
||||||
this.getfunctionNum();
|
this.getfunctionNum();
|
||||||
this.getAdvertising();
|
this.getAdvertising();
|
||||||
@ -256,14 +350,68 @@ export default {
|
|||||||
// desc() {
|
// desc() {
|
||||||
// NavgateTo("../communityDetail/index")
|
// NavgateTo("../communityDetail/index")
|
||||||
// },
|
// },
|
||||||
|
checkComm(item) {
|
||||||
|
if (uni.getStorageSync("is_me")) {
|
||||||
|
uni.setStorageSync("changeCommData", { name: item.name, id: item.community_id })
|
||||||
|
} else {
|
||||||
|
this.communityList = []
|
||||||
|
this.communityVal = item.name;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async getCommunityList() {
|
||||||
|
await request(apiArr2.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) => {
|
||||||
|
if (res.rows.length == 0) {
|
||||||
|
uni.removeStorageSync("changeCommData");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const targetItem = res.rows.find((item) => {
|
||||||
|
return item.community_id == uni.getStorageSync("changeCommData").id;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (targetItem) {
|
||||||
|
//是否跳转物业缴费
|
||||||
|
this.isShowBill = targetItem.bill_front_end_display == 1;
|
||||||
|
//小区是否隐藏
|
||||||
|
if (targetItem.front_end_display == 1) {
|
||||||
|
uni.removeStorageSync("changeCommData");
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
uni.removeStorageSync("changeCommData");
|
||||||
|
}
|
||||||
|
|
||||||
|
res.rows = res.rows.filter((item) => {
|
||||||
|
return item.front_end_display != 1;
|
||||||
|
});
|
||||||
|
if (!uni.getStorageSync("changeCommData")) {
|
||||||
|
uni.setStorageSync("changeCommData", { name: res.rows[0].name, id: res.rows[0].community_id })
|
||||||
|
}
|
||||||
|
this.communityList = res.rows;
|
||||||
|
});
|
||||||
|
if (this.communityList.length == 0) {
|
||||||
|
this.communityVal = "添加我的房产";
|
||||||
|
} else {
|
||||||
|
this.communityVal = uni.getStorageSync("changeCommData").name;
|
||||||
|
}
|
||||||
|
},
|
||||||
apply() {
|
apply() {
|
||||||
NavgateTo("../applyOwer/index");
|
NavgateTo("../applyOwer/index");
|
||||||
},
|
},
|
||||||
closeAds() {
|
closeAds() {
|
||||||
this.ads1Show = false;
|
this.ads1Show = false;
|
||||||
|
// 记录用户已关闭过弹窗1
|
||||||
|
uni.setStorageSync('ads1Showed', true);
|
||||||
},
|
},
|
||||||
closeAds2() {
|
closeAds2() {
|
||||||
this.ads2Show = false;
|
this.ads2Show = false;
|
||||||
|
// 记录用户已关闭过弹窗2
|
||||||
|
uni.setStorageSync('ads2Showed', true);
|
||||||
},
|
},
|
||||||
jump(e) {
|
jump(e) {
|
||||||
if (!e) {
|
if (!e) {
|
||||||
@ -293,6 +441,7 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
async getfunctionNum() {
|
async getfunctionNum() {
|
||||||
|
this.functionList = this.defaultFunctionList;
|
||||||
const res = await request(
|
const res = await request(
|
||||||
apiArr.commInfo,
|
apiArr.commInfo,
|
||||||
"POST",
|
"POST",
|
||||||
@ -318,16 +467,24 @@ export default {
|
|||||||
console.log(res, "xx");
|
console.log(res, "xx");
|
||||||
|
|
||||||
// 获取 rowNum 和 colNum 的乘积
|
// 获取 rowNum 和 colNum 的乘积
|
||||||
const totalItems = this.rowNum * this.colNum;
|
const totalItems = this.rowNum * this.colNum - 3;
|
||||||
// 使用 slice 方法截取前 totalItems 个元素
|
// 截取前 totalItems 个元素
|
||||||
this.functionList = res.rows.slice(0, totalItems).map((item) => {
|
const newItems = res.rows.slice(0, totalItems).map((item) => {
|
||||||
return {
|
return {
|
||||||
...item,
|
...item,
|
||||||
nav_icon: picUrl + item.nav_icon,
|
nav_icon: picUrl + item.nav_icon,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
console.log("functionList", this.functionList);
|
// 根据nav_name判断是否已存在,不存在则添加
|
||||||
|
newItems.forEach(newItem => {
|
||||||
|
const exists = this.functionList.some(existingItem =>
|
||||||
|
existingItem.nav_name === newItem.nav_name
|
||||||
|
);
|
||||||
|
if (!exists) {
|
||||||
|
this.functionList.push(newItem);
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
async getAdvertising() {
|
async getAdvertising() {
|
||||||
@ -385,7 +542,9 @@ export default {
|
|||||||
ad_picture: picUrl + item.ad_picture,
|
ad_picture: picUrl + item.ad_picture,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
this.ads1Show = res4.rows.length !== 0 ? true : false;
|
// 检查用户是否已关闭过弹窗1,只有当没有关闭过且有广告数据时才显示
|
||||||
|
const ads1Showed = uni.getStorageSync('ads1Showed');
|
||||||
|
this.ads1Show = !ads1Showed && res4.rows.length !== 0 ? true : false;
|
||||||
|
|
||||||
const res5 = await request(apiArr.advPage, "POST", {
|
const res5 = await request(apiArr.advPage, "POST", {
|
||||||
community_id: Number(uni.getStorageSync("changeCommData").id),
|
community_id: Number(uni.getStorageSync("changeCommData").id),
|
||||||
@ -399,7 +558,9 @@ export default {
|
|||||||
ad_picture: picUrl + item.ad_picture,
|
ad_picture: picUrl + item.ad_picture,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
this.ads2Show = res5.rows.length !== 0 ? true : false;
|
// 检查用户是否已关闭过弹窗2,只有当没有关闭过且有广告数据时才显示
|
||||||
|
const ads2Showed = uni.getStorageSync('ads2Showed');
|
||||||
|
this.ads2Show = !ads2Showed && res5.rows.length !== 0 ? true : false;
|
||||||
},
|
},
|
||||||
|
|
||||||
headerServerClick(e) {
|
headerServerClick(e) {
|
||||||
@ -521,7 +682,7 @@ export default {
|
|||||||
|
|
||||||
const res = await request(apiArr.infoPage, "POST", {
|
const res = await request(apiArr.infoPage, "POST", {
|
||||||
community_id: Number(uni.getStorageSync("changeCommData").id),
|
community_id: Number(uni.getStorageSync("changeCommData").id),
|
||||||
announcement_category_id: item.id,
|
announcement_category_id: item?.id,
|
||||||
title: "",
|
title: "",
|
||||||
category_name: "",
|
category_name: "",
|
||||||
page_num: this.page_num,
|
page_num: this.page_num,
|
||||||
|
|||||||
@ -1,67 +1,41 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
page {
|
page {
|
||||||
background-color: #f6f7fb;
|
background-color: #f6f7fb;
|
||||||
}
|
}
|
||||||
|
|
||||||
.community-list-container {
|
.community-list-container {
|
||||||
padding: 20rpx;
|
padding: 20rpx;
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-bar {
|
|
||||||
background-color: #fff;
|
|
||||||
padding: 20rpx;
|
|
||||||
border-radius: 10rpx;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
border-radius: 50rpx;
|
|
||||||
padding: 15rpx 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-icon {
|
|
||||||
width: 40rpx;
|
|
||||||
height: 40rpx;
|
|
||||||
font-family: 'iconfont';
|
|
||||||
color: #999;
|
|
||||||
margin-right: 15rpx;
|
|
||||||
font-size: 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input input {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #333;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.community-list {
|
.community-list {
|
||||||
border-radius: 10rpx;
|
width: 100%;
|
||||||
overflow: hidden;
|
}
|
||||||
|
|
||||||
|
.community-item-box {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||||
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.community-item {
|
.community-item {
|
||||||
padding: 20rpx;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 15rpx;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.community-item:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.community-image {
|
.community-image {
|
||||||
width: 160rpx;
|
width: 200rpx;
|
||||||
height: 160rpx;
|
height: 200rpx;
|
||||||
border-radius: 10rpx;
|
border-radius: 12rpx;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-right: 20rpx;
|
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
margin-right: 30rpx;
|
||||||
|
background-color: #f5f5f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.community-image image {
|
.community-image image {
|
||||||
@ -70,62 +44,97 @@ page {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.community-info {
|
.community-info {
|
||||||
flex: 1;
|
min-height: 200rpx;
|
||||||
display: flex;
|
width: 100%;
|
||||||
flex-direction: column;
|
position: relative;
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.community-name {
|
.community-name {
|
||||||
font-size: 32rpx;
|
font-size: 36rpx;
|
||||||
font-weight: bold;
|
font-weight: 600;
|
||||||
color: #333;
|
color: #333;
|
||||||
display: -webkit-box;
|
line-height: 50rpx;
|
||||||
-webkit-line-clamp: 1;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.community-address {
|
.community-property {
|
||||||
font-size: 26rpx;
|
font-size: 24rpx;
|
||||||
color: #666;
|
color: #666;
|
||||||
|
line-height: 40rpx;
|
||||||
margin-top: 10rpx;
|
margin-top: 10rpx;
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 1;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.community-distance {
|
.community-distance {
|
||||||
|
display: inline-block;
|
||||||
|
border: 1rpx solid #5ba6ec;
|
||||||
|
color: #5ba6ec;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
color: #999;
|
font-weight: bold;
|
||||||
|
padding: 5rpx 15rpx;
|
||||||
|
border-radius: 15rpx;
|
||||||
margin-top: 10rpx;
|
margin-top: 10rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 适配不同屏幕尺寸 */
|
.community-buttons {
|
||||||
@media screen and (min-width: 768px) {
|
display: flex;
|
||||||
.community-list-container {
|
gap: 20rpx;
|
||||||
padding: 30rpx;
|
margin-top: 20rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.community-item {
|
.community-action-btn {
|
||||||
padding: 30rpx;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
.community-image {
|
background-color: #f0f2f5;
|
||||||
width: 200rpx;
|
border-radius: 24rpx;
|
||||||
height: 200rpx;
|
padding: 8rpx 16rpx;
|
||||||
}
|
font-size: 24rpx;
|
||||||
|
color: #666;
|
||||||
.community-name {
|
}
|
||||||
font-size: 36rpx;
|
|
||||||
}
|
.btn-icon {
|
||||||
|
margin-right: 6rpx;
|
||||||
.community-address {
|
font-size: 22rpx;
|
||||||
font-size: 28rpx;
|
}
|
||||||
}
|
|
||||||
|
.btn-text {
|
||||||
.community-distance {
|
font-size: 24rpx;
|
||||||
font-size: 26rpx;
|
margin-left: 5rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#local {
|
||||||
|
height: 30rpx;
|
||||||
|
width: 28.08rpx;
|
||||||
|
margin-right: 17rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.community-address {
|
||||||
|
display: flex;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 36rpx;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.community-address-text {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.enter-btn {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
background: #7bc327;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 24rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 5rpx;
|
||||||
|
right: 0rpx;
|
||||||
}
|
}
|
||||||
@ -1,81 +1,385 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="community-list-container">
|
<view class="community-list-container">
|
||||||
<!-- <view class="search-bar">
|
|
||||||
<view class="search-input">
|
|
||||||
<image
|
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
|
||||||
mode="aspectFill" class="search-icon"></image>
|
|
||||||
<input type="text" placeholder="搜索社区" />
|
|
||||||
</view>
|
|
||||||
</view> -->
|
|
||||||
|
|
||||||
<view class="community-list">
|
<view class="community-list">
|
||||||
<view class="community-item" v-for="(item, index) in communityList" :key="index">
|
<view class="community-item-box" v-for="(item, index) in communityList" :key="index">
|
||||||
<view class="community-image">
|
<view class="community-item">
|
||||||
<image :src="item.image" mode="aspectFill"></image>
|
<view class="community-image" @tap="enterCommunity(item)">
|
||||||
|
<!-- 使用默认图片作为 fallback -->
|
||||||
|
<image :src="item.pic || defaultCommunityImage" mode="aspectFill"
|
||||||
|
@error="handleImageError(item)"></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="community-info">
|
<view class="community-info">
|
||||||
<view class="community-name">{{ item.name }}</view>
|
<view class="community-name" @tap="enterCommunity(item)">{{ item.name }}</view>
|
||||||
<view class="community-address">{{ item.address }}</view>
|
<view class="community-property">物业公司:{{ item.property || '-' }}</view>
|
||||||
<view class="community-distance">{{ item.distance }}</view>
|
<view class="community-distance">距我当前:{{ item.distance || '未知' }}</view>
|
||||||
|
<view class="community-buttons">
|
||||||
|
<view class="community-action-btn" @tap="navigate(item)">
|
||||||
|
<uni-icons type="paperplane-filled" size="18"></uni-icons>
|
||||||
|
<text class="btn-text">导航</text>
|
||||||
|
</view>
|
||||||
|
<view class="community-action-btn" @tap="callPhone(item)" v-if="item.property_server_phone">
|
||||||
|
<uni-icons type="phone-filled" size="18"></uni-icons>
|
||||||
|
<view class="btn-text">电话</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="item.isShow" class="enter-btn" @tap="enterCommunity(item)">进入小区</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="community-address">
|
||||||
|
<image id="local"
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_localIcon.png"
|
||||||
|
mode="aspectFill"></image>
|
||||||
|
<view class="community-address-text">{{ item.addr }}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<nav-footer :current="0" />
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import {
|
||||||
|
request,
|
||||||
|
picUrl,
|
||||||
|
uniqueByField,
|
||||||
|
menuButtonInfo,
|
||||||
|
NavgateTo,
|
||||||
|
calculateDistance
|
||||||
|
} from "../../../utils";
|
||||||
|
import { apiArr } from "../../../api/community";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CommunityList',
|
name: 'CommunityList',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
communityList: [
|
communityList: [], // 用于显示的列表
|
||||||
{
|
allCommunityList: [], // 存储所有数据的列表
|
||||||
id: 1,
|
currentPage: 1,
|
||||||
name: '凯旋城东区',
|
pageSize: 16,
|
||||||
address: '衡水市,桃城-衡水市人民路与育才街交叉口西行100米路南',
|
hasMoreData: true,
|
||||||
distance: '0 m',
|
isLoading: false,
|
||||||
image: 'http://localhost:8080/test_community.png'
|
tencentMapKey: '55NBZ-MUQYW-EAJRL-YIWPA-ZXCR6-4NBPP', // 腾讯地图API Key
|
||||||
|
defaultCommunityImage: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community_no_image3.png' // 默认小区图片
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: '岸芷庭蓝(一区)',
|
|
||||||
address: '衡水市,河阳西路与中华南大街交叉口东220米',
|
|
||||||
distance: '1000 m',
|
|
||||||
image: 'http://localhost:8080/test_community.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: '滏阳锦苑',
|
|
||||||
address: '衡水市,滏阳苑',
|
|
||||||
distance: '2 km',
|
|
||||||
image: 'http://localhost:8080/test_community.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
name: '隆兴小区',
|
|
||||||
address: '衡水市,河北省衡水市高新区隆兴西路隆兴小区',
|
|
||||||
distance: '5 km',
|
|
||||||
image: 'http://localhost:8080/test_community.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
name: '紫金广场',
|
|
||||||
address: '衡水市,衡水市桃城区人民西路与庆丰南街交叉口',
|
|
||||||
distance: '894 km',
|
|
||||||
image: 'http://localhost:8080/test_community.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
name: '万和瑞景',
|
|
||||||
address: '衡水市,政通街46号',
|
|
||||||
distance: '12249 km',
|
|
||||||
image: 'http://localhost:8080/test_community.png'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getCommunityList() {
|
||||||
|
// 如果正在加载中,则不再请求
|
||||||
|
if (this.isLoading) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示加载中提示
|
||||||
|
uni.showLoading({
|
||||||
|
title: '加载中...'
|
||||||
|
});
|
||||||
|
|
||||||
|
this.isLoading = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 获取用户当前位置
|
||||||
|
const locationData = await this.getUserLocation();
|
||||||
|
if (!locationData) {
|
||||||
|
throw new Error('无法获取用户位置');
|
||||||
|
}
|
||||||
|
|
||||||
|
const userLat = parseFloat(locationData.lat);
|
||||||
|
const userLng = parseFloat(locationData.lng);
|
||||||
|
|
||||||
|
// 获取现有小区列表
|
||||||
|
const res = await request(apiArr.getAllList, "POST", {
|
||||||
|
page_num: 1,
|
||||||
|
page_size: 9999
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res && res.rows) {
|
||||||
|
// 处理现有数据,只保留距离1km以内的小区
|
||||||
|
let processedList = res.rows.map(item => {
|
||||||
|
// 处理图片路径
|
||||||
|
if (item.pic) {
|
||||||
|
item.pic = picUrl + item.pic;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 只有当经纬度都有效时才计算距离
|
||||||
|
if (userLat && userLng && item.lat && item.lng) {
|
||||||
|
const parkLat = parseFloat(item.lat);
|
||||||
|
const parkLng = parseFloat(item.lng);
|
||||||
|
|
||||||
|
// 使用Haversine公式计算距离(单位:千米)
|
||||||
|
const distance = calculateDistance(userLat, userLng, parkLat, parkLng);
|
||||||
|
item.distance = distance.toFixed(2) + 'km';
|
||||||
|
item.distanceValue = distance; // 保存数值型距离用于排序
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('计算距离失败:', error);
|
||||||
|
item.distanceValue = Infinity;
|
||||||
|
}
|
||||||
|
// 初始化isShow属性
|
||||||
|
item.isShow = true;
|
||||||
|
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 过滤出距离1km以内的数据
|
||||||
|
processedList = processedList.filter(item =>
|
||||||
|
item.distanceValue && item.distanceValue <= 1
|
||||||
|
);
|
||||||
|
|
||||||
|
// 调用腾讯地图API获取附近1km的小区(包含图片信息)
|
||||||
|
const nearbyCommunities = await this.getNearbyCommunities(userLat, userLng);
|
||||||
|
|
||||||
|
// 合并现有数据和腾讯地图API返回的数据
|
||||||
|
let mergedList = [...processedList];
|
||||||
|
|
||||||
|
if (nearbyCommunities && nearbyCommunities.length > 0) {
|
||||||
|
// 处理腾讯地图返回的数据,提取图片信息
|
||||||
|
const tencentCommunities = nearbyCommunities.map(item => {
|
||||||
|
// 计算距离
|
||||||
|
const distance = calculateDistance(userLat, userLng, item.lat, item.lng);
|
||||||
|
|
||||||
|
// 提取图片(腾讯地图POI可能包含多张图片)
|
||||||
|
let communityImage = '';
|
||||||
|
if (item.photos && item.photos.length > 0) {
|
||||||
|
// 取第一张图片
|
||||||
|
communityImage = item.photos[0].url;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
name: item.title,
|
||||||
|
addr: item.address,
|
||||||
|
lat: item.lat,
|
||||||
|
lng: item.lng,
|
||||||
|
distance: distance.toFixed(2) + 'km',
|
||||||
|
distanceValue: distance,
|
||||||
|
// 补充其他必要字段
|
||||||
|
pic: communityImage || this.defaultCommunityImage, // 使用腾讯地图图片或默认图片
|
||||||
|
property: item.extension && item.extension.property_company ? item.extension.property_company : '-',
|
||||||
|
property_server_phone: item.tel || '',
|
||||||
|
community_id: `tencent_${item.id}` // 为腾讯地图数据设置唯一ID
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// 合并数据
|
||||||
|
mergedList = [...processedList, ...tencentCommunities];
|
||||||
|
|
||||||
|
// 根据community_id去重
|
||||||
|
mergedList = uniqueByField(mergedList, 'community_id');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 根据距离排序
|
||||||
|
mergedList.sort((a, b) => {
|
||||||
|
const distanceA = a.distanceValue || Infinity;
|
||||||
|
const distanceB = b.distanceValue || Infinity;
|
||||||
|
|
||||||
|
return distanceA - distanceB;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 保存所有数据到allCommunityList
|
||||||
|
this.allCommunityList = mergedList;
|
||||||
|
|
||||||
|
this.currentPage = 1;
|
||||||
|
this.updateDisplayList();
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取社区列表失败:', error);
|
||||||
|
uni.showToast({
|
||||||
|
title: '获取数据失败',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 1500
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false;
|
||||||
|
// 隐藏加载中提示
|
||||||
|
uni.hideLoading();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取用户当前位置
|
||||||
|
getUserLocation() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
try {
|
||||||
|
let locationData = uni.getStorageSync('location');
|
||||||
|
if (locationData) {
|
||||||
|
// 确保locationData是对象而不是字符串
|
||||||
|
const location = typeof locationData === 'string' ? JSON.parse(locationData) : locationData;
|
||||||
|
if (location.lat && location.lng) {
|
||||||
|
resolve(location);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('从缓存获取位置失败:', error);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果缓存中没有有效位置,则请求新的位置
|
||||||
|
uni.getLocation({
|
||||||
|
type: 'gcj02',
|
||||||
|
altitude: true,
|
||||||
|
success: (res) => {
|
||||||
|
const location = {
|
||||||
|
lat: res.latitude,
|
||||||
|
lng: res.longitude
|
||||||
|
};
|
||||||
|
// 保存到缓存
|
||||||
|
uni.setStorageSync('location', location);
|
||||||
|
resolve(location);
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.error('获取位置失败:', err);
|
||||||
|
reject(err);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 调用腾讯地图API获取附近1km的小区(包含图片信息)
|
||||||
|
async getNearbyCommunities(lat, lng) {
|
||||||
|
try {
|
||||||
|
const keyword = '小区';
|
||||||
|
const radius = 1000; // 1km范围
|
||||||
|
const pageSize = 20;
|
||||||
|
|
||||||
|
// 使用uni.request调用腾讯地图API,增加extensions=all参数获取更多信息
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
uni.request({
|
||||||
|
url: 'https://apis.map.qq.com/ws/place/v1/search',
|
||||||
|
method: 'GET',
|
||||||
|
data: {
|
||||||
|
keyword: keyword,
|
||||||
|
boundary: `nearby(${lat},${lng},${radius})`,
|
||||||
|
key: this.tencentMapKey,
|
||||||
|
page_size: pageSize,
|
||||||
|
extensions: 'all' // 获取详细信息,包括图片
|
||||||
|
},
|
||||||
|
success: (res) => {
|
||||||
|
if (res.statusCode === 200 && res.data.status === 0) {
|
||||||
|
// 提取需要的数据,包括图片信息
|
||||||
|
const results = res.data.data.map(item => ({
|
||||||
|
id: item.id,
|
||||||
|
title: item.title,
|
||||||
|
address: item.address,
|
||||||
|
lat: item.location.lat,
|
||||||
|
lng: item.location.lng,
|
||||||
|
tel: item.tel || '',
|
||||||
|
photos: item.photos || [], // 提取图片数组
|
||||||
|
extension: item.extension || {}, // 提取扩展信息,可能包含物业公司
|
||||||
|
isShow: false
|
||||||
|
}));
|
||||||
|
resolve(results);
|
||||||
|
} else {
|
||||||
|
console.error('腾讯地图API请求失败:', res.data);
|
||||||
|
resolve([]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.error('腾讯地图API请求错误:', err);
|
||||||
|
resolve([]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取附近小区失败:', error);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 图片加载失败时使用默认图片
|
||||||
|
handleImageError(item) {
|
||||||
|
item.pic = this.defaultCommunityImage;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 更新显示的列表数据
|
||||||
|
updateDisplayList() {
|
||||||
|
const startIndex = 0;
|
||||||
|
const endIndex = this.currentPage * this.pageSize;
|
||||||
|
this.communityList = this.allCommunityList.slice(startIndex, endIndex);
|
||||||
|
this.hasMoreData = endIndex < this.allCommunityList.length;
|
||||||
|
},
|
||||||
|
navigate(item) {
|
||||||
|
// 实现导航功能
|
||||||
|
if (item.lat && item.lng) {
|
||||||
|
// 确保经纬度是有效的数字
|
||||||
|
const latitude = parseFloat(item.lat);
|
||||||
|
const longitude = parseFloat(item.lng);
|
||||||
|
|
||||||
|
if (!isNaN(latitude) && !isNaN(longitude)) {
|
||||||
|
uni.openLocation({
|
||||||
|
latitude: latitude,
|
||||||
|
longitude: longitude,
|
||||||
|
name: item.name || '未知小区',
|
||||||
|
address: item.addr || '',
|
||||||
|
scale: 18,
|
||||||
|
success: () => {
|
||||||
|
console.log('打开地图成功:', item.name);
|
||||||
|
},
|
||||||
|
fail: (error) => {
|
||||||
|
console.error('打开地图失败:', error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: '位置信息无效',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 1500
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: '暂无位置信息',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 1500
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
callPhone(item) {
|
||||||
|
if (item.property_server_phone) {
|
||||||
|
uni.makePhoneCall({
|
||||||
|
phoneNumber: item.property_server_phone,
|
||||||
|
success: () => {
|
||||||
|
},
|
||||||
|
fail: (error) => {
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: '暂无联系电话',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 1500
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
enterCommunity(item) {
|
||||||
|
request(apiArr.checkComm, "POST", {
|
||||||
|
community_id: item.community_id,
|
||||||
|
user_id: uni.getStorageSync("userId"),
|
||||||
|
}).then((res) => {
|
||||||
|
uni.setStorageSync("is_me", res.is_me)
|
||||||
|
NavgateTo("/packages/community/index/index?item=" + JSON.stringify(item));
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 下拉加载更多
|
||||||
|
loadMore() {
|
||||||
|
if (this.hasMoreData && !this.isLoading) {
|
||||||
|
this.currentPage += 1;
|
||||||
|
this.updateDisplayList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.getCommunityList();
|
||||||
|
},
|
||||||
|
// 监听页面滚动到底部
|
||||||
|
onReachBottom() {
|
||||||
|
this.loadMore();
|
||||||
|
},
|
||||||
|
// 下拉刷新
|
||||||
|
onPullDownRefresh() {
|
||||||
|
this.currentPage = 1;
|
||||||
|
this.hasMoreData = true;
|
||||||
|
this.getCommunityList().then(() => {
|
||||||
|
uni.stopPullDownRefresh();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,6 +1,40 @@
|
|||||||
page {
|
page {
|
||||||
background-color: #f6f7fb;
|
background-color: #ffffff;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchBox {
|
||||||
|
padding-bottom: 24rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
margin-top: 105rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchBox_add {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchBox_left {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchBox_mid {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #222222;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchBox_right {
|
||||||
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
@ -22,9 +56,22 @@ image {
|
|||||||
margin-top: 180rpx;
|
margin-top: 180rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.emptyTitle {
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #222222;
|
||||||
|
margin-top: 50rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emptyMsg {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.empty image {
|
.empty image {
|
||||||
width: 340rpx;
|
width: 500rpx;
|
||||||
height: 240rpx;
|
height: 400rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.addBtn {
|
.addBtn {
|
||||||
@ -57,11 +104,13 @@ image {
|
|||||||
border-bottom: 1rpx solid #EBEBEB;
|
border-bottom: 1rpx solid #EBEBEB;
|
||||||
padding: 30rpx 0;
|
padding: 30rpx 0;
|
||||||
}
|
}
|
||||||
.communityItem_left{
|
|
||||||
|
.communityItem_left {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.communityItem_left_img {
|
.communityItem_left_img {
|
||||||
width: 160rpx;
|
width: 160rpx;
|
||||||
height: 140rpx;
|
height: 140rpx;
|
||||||
@ -69,9 +118,11 @@ image {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-right: 30rpx;
|
margin-right: 30rpx;
|
||||||
}
|
}
|
||||||
.communityItem_left_msg{
|
|
||||||
|
.communityItem_left_msg {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.communityItem_left_msg_tit {
|
.communityItem_left_msg_tit {
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
color: #222222;
|
color: #222222;
|
||||||
@ -86,7 +137,7 @@ image {
|
|||||||
color: #999999;
|
color: #999999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.communityItem_right{
|
.communityItem_right {
|
||||||
width: 34rpx;
|
width: 34rpx;
|
||||||
height: 34rpx;
|
height: 34rpx;
|
||||||
margin-left: 80rpx;
|
margin-left: 80rpx;
|
||||||
|
|||||||
@ -1,35 +1,44 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
|
<!-- <view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||||||
|
<view class="searchBox_add">
|
||||||
|
<view class="searchBox_left">
|
||||||
|
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
|
||||||
|
</view>
|
||||||
|
<view class="searchBox_mid">我的房产</view>
|
||||||
|
<view class="searchBox_right"></view>
|
||||||
|
</view>
|
||||||
|
</view> -->
|
||||||
<view class="empty" v-if="communityList.length == 0">
|
<view class="empty" v-if="communityList.length == 0">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_newEmpty.png"
|
<view class="emptyTitle">绑定房源</view>
|
||||||
alt="" />
|
<view class="emptyMsg">请绑定房源信息 以便使用其他功能</view>
|
||||||
没有添加任何房产
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community_no_image3.png" alt="" />
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<div class="communityList">
|
<view class="communityList">
|
||||||
<div class="communityItem" v-for="item in communityList" :key="item.community_id"
|
<view class="communityItem" v-for="item in communityList" :key="item.community_id"
|
||||||
@click="choseCommunity(item)">
|
@click="choseCommunity(item)">
|
||||||
<div class="communityItem_left">
|
<view class="communityItem_left">
|
||||||
<div class="communityItem_left_img">
|
<view class="communityItem_left_img">
|
||||||
<image :src="item.pic" mode="aspectFill"></image>
|
<image :src="item.pic" mode="aspectFill"></image>
|
||||||
</div>
|
</view>
|
||||||
<div class="communityItem_left_msg">
|
<view class="communityItem_left_msg">
|
||||||
<div class="communityItem_left_msg_tit">{{ item.name }}<span>( {{ item.room_owner_list.length }}
|
<view class="communityItem_left_msg_tit">{{ item.name }}<span>( {{ item.room_owner_list.length
|
||||||
)</span></div>
|
}}
|
||||||
<div class="communityItem_left_msg_msg">{{ item.addr }}</div>
|
)</span></view>
|
||||||
</div>
|
<view class="communityItem_left_msg_msg">{{ item.addr }}</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="communityItem_right">
|
</view>
|
||||||
|
<view class="communityItem_right">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png"
|
<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>
|
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"
|
<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>
|
v-if="item.community_id == currentCommunity.id"></image>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="addBtn" @click="addCommunity">添加我的房产</div>
|
<view class="addBtn" @click="addCommunity">去绑定房源</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -53,6 +62,9 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
back() {
|
||||||
|
NavgateTo("/packages/community/index/index")
|
||||||
|
},
|
||||||
addCommunity() {
|
addCommunity() {
|
||||||
NavgateTo("/packages/community/addCommunity/index")
|
NavgateTo("/packages/community/addCommunity/index")
|
||||||
},
|
},
|
||||||
@ -78,9 +90,7 @@ export default {
|
|||||||
choseCommunity(e) {
|
choseCommunity(e) {
|
||||||
this.currentCommunity = e
|
this.currentCommunity = e
|
||||||
uni.setStorageSync('changeCommData', { id: e.community_id, name: e.name });
|
uni.setStorageSync('changeCommData', { id: e.community_id, name: e.name });
|
||||||
uni.setStorageSync('currentCommunityAddr',e.addr);
|
uni.setStorageSync('currentCommunityAddr', e.addr);
|
||||||
uni.setStorageSync("isShowNav", e.room_owner_list[0].type)
|
|
||||||
console.log("🚀 ~ choseCommunity ~ e.room_owner_list[0].type:", e.room_owner_list[0].type)
|
|
||||||
NavgateTo("1")
|
NavgateTo("1")
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,97 +1,97 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<view class="container">
|
||||||
<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
<view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||||||
<div class="searchBox_add">
|
<view class="searchBox_add">
|
||||||
<div class="searchBox_left">
|
<view 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>
|
</view>
|
||||||
<div class="searchBox_mid">报修信息</div>
|
<view class="searchBox_mid">报修信息</view>
|
||||||
<div class="searchBox_right"></div>
|
<view class="searchBox_right"></view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="repairMsg">
|
<view class="repairMsg">
|
||||||
<div class="repairTit">
|
<view class="repairTit">
|
||||||
报修信息
|
报修信息
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="label"><span class="red">*</span>选择房源信息</div>
|
<view class="label"><span class="red">*</span>选择房源信息</view>
|
||||||
<div class="roomList">
|
<view class="roomList">
|
||||||
<div v-for="(item, index) in roomList" :key="index" :class="active == index ?'roomItem active':'roomItem'" @click="changeAct(index)">{{ item.name }}</div>
|
<view v-for="(item, index) in roomList" :key="index" :class="active == index ?'roomItem active':'roomItem'" @click="changeAct(index)">{{ item.name }}</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="row">
|
<view class="row">
|
||||||
<div class="row_label"><span class="red">*</span>报修类型</div>
|
<view class="row_label"><span class="red">*</span>报修类型</view>
|
||||||
<div class="row_con" @click="chose">
|
<view class="row_con" @click="chose">
|
||||||
<input type="text" :value="category.category_name" placeholder="请选择报修类型" disabled>
|
<input type="text" :value="category.category_name" placeholder="请选择报修类型" disabled>
|
||||||
<u-icon bold color="#999999" size="30" name="arrow-right"></u-icon>
|
<u-icon bold color="#999999" size="30" name="arrow-right"></u-icon>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="row">
|
<view class="row">
|
||||||
<div class="row_label"><span class="red">*</span>问题描述</div>
|
<view class="row_label"><span class="red">*</span>问题描述</view>
|
||||||
<div class="row_con">
|
<view class="row_con">
|
||||||
<input type="text" placeholder="请描述故障" :value="repairInfo" data-name="repairInfo" @input="handlerInputClick">
|
<input type="text" placeholder="请描述故障" :value="repairInfo" data-name="repairInfo" @input="handlerInputClick">
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="row">
|
<view class="row">
|
||||||
<div class="row_label"><span class="red">*</span>联系人</div>
|
<view class="row_label"><span class="red">*</span>联系人</view>
|
||||||
<div class="row_con">
|
<view class="row_con">
|
||||||
<input type="text" placeholder="请输入您的姓名" :value="contactName" data-name="contactName" @input="handlerInputClick">
|
<input type="text" placeholder="请输入您的姓名" :value="contactName" data-name="contactName" @input="handlerInputClick">
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="row">
|
<view class="row">
|
||||||
<div class="row_label"><span class="red">*</span>联系电话</div>
|
<view class="row_label"><span class="red">*</span>联系电话</view>
|
||||||
<div class="row_con">
|
<view class="row_con">
|
||||||
<input type="number" maxlength="11" placeholder="请输入您的联系方式" :value="contactPhone" data-name="contactPhone" @input="handlerInputClick">
|
<input type="number" maxlength="11" placeholder="请输入您的联系方式" :value="contactPhone" data-name="contactPhone" @input="handlerInputClick">
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="row noneBorder">
|
<view class="row noneBorder">
|
||||||
<div class="row_label"><span class="red">*</span>上门时间</div>
|
<view class="row_label"><span class="red">*</span>上门时间</view>
|
||||||
<div class="row_con" @click="choseTime">
|
<view class="row_con" @click="choseTime">
|
||||||
<input type="text" :value="time" placeholder="请选择上门时间" disabled>
|
<input type="text" :value="time" placeholder="请选择上门时间" disabled>
|
||||||
<u-icon bold color="#999999" size="30" name="arrow-right"></u-icon>
|
<u-icon bold color="#999999" size="30" name="arrow-right"></u-icon>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="repairMedia">
|
<view class="repairMedia">
|
||||||
<div class="row df">
|
<view class="row df">
|
||||||
<div class="row_label">上传图片</div>
|
<view class="row_label">上传图片</view>
|
||||||
<div class="row_con2">
|
<view class="row_con2">
|
||||||
<u-upload :fileList="imgList" name="imgList" @afterRead="afterReadImg" @delete="deletePic" multiple
|
<u-upload :fileList="imgList" name="imgList" @afterRead="afterReadImg" @delete="deletePic" multiple
|
||||||
:maxCount="5">
|
:maxCount="5">
|
||||||
<div class="imgCon">
|
<view class="imgCon">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_imageImg.png" mode="widthFix"></image>
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_imageImg.png" mode="widthFix"></image>
|
||||||
上传图片
|
上传图片
|
||||||
</div>
|
</view>
|
||||||
</u-upload>
|
</u-upload>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="row df">
|
<view class="row df">
|
||||||
<div class="row_label">上传视频</div>
|
<view class="row_label">上传视频</view>
|
||||||
<div class="row_con2">
|
<view class="row_con2">
|
||||||
<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">
|
<view class="imgCon">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_videoImg.png" mode="widthFix"></image>
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_videoImg.png" mode="widthFix"></image>
|
||||||
上传视频
|
上传视频
|
||||||
</div>
|
</view>
|
||||||
</u-upload>
|
</u-upload>
|
||||||
|
|
||||||
<div v-if="videoList.url" class="videoBOX">
|
<view v-if="videoList.url" class="videoBOX">
|
||||||
<video id="myVideo" :src="videoList.url" playsinline webkit-playsinline></video>
|
<video id="myVideo" :src="videoList.url" playsinline webkit-playsinline></video>
|
||||||
<div class="mask" @click="playFullScreenVideo">
|
<view class="mask" @click="playFullScreenVideo">
|
||||||
<div class="mask_cancel" @click="cancels">删除</div>
|
<view class="mask_cancel" @click="cancels">删除</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<u-picker :show="show" :columns="[columns]" keyName="category_name" @confirm="confirm1" @cancel="cancel1" />
|
<u-picker :show="show" :columns="[columns]" keyName="category_name" @confirm="confirm1" @cancel="cancel1" />
|
||||||
<u-datetime-picker
|
<u-datetime-picker
|
||||||
@ -105,9 +105,9 @@
|
|||||||
@close="cancel2"
|
@close="cancel2"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="btn" @click="handlerSubmitClick">确认报修</div>
|
<view class="btn" @click="handlerSubmitClick">确认报修</view>
|
||||||
|
|
||||||
</div>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@ -213,7 +213,7 @@ image {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.payItem_money{
|
.payItem_money{
|
||||||
width: 150rpx;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom {
|
.bottom {
|
||||||
|
|||||||
@ -1,319 +1,255 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<view class="container">
|
||||||
<div
|
<view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||||||
class="searchBox"
|
<view class="searchBox_add">
|
||||||
:style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
|
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
|
||||||
>
|
</view>
|
||||||
<div class="searchBox_add">
|
</view>
|
||||||
<u-icon
|
|
||||||
bold
|
|
||||||
color="#000"
|
|
||||||
size="40"
|
|
||||||
name="arrow-left"
|
|
||||||
@click="back"
|
|
||||||
></u-icon>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="community">
|
<view class="community">
|
||||||
<div class="community_left">
|
<view class="community_left">
|
||||||
<image
|
<image mode="aspectFill" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/test.png"
|
||||||
mode="aspectFill"
|
alt="" />
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/test.png"
|
</view>
|
||||||
alt=""
|
<view class="community_right" @click="changeShow">
|
||||||
/>
|
<view class="community_right_text">
|
||||||
</div>
|
<view class="community_right_text1">{{ currentRoom.name }}</view>
|
||||||
<div class="community_right" @click="changeShow">
|
<view class="community_right_text2">{{ currentCommunityAddr }}</view>
|
||||||
<div class="community_right_text">
|
</view>
|
||||||
<div class="community_right_text1">{{ currentRoom.name }}</div>
|
<view class="community_right_more">
|
||||||
<div class="community_right_text2">{{ currentCommunityAddr }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="community_right_more">
|
|
||||||
<u-icon bold color="#999999" size="30" name="arrow-right"></u-icon>
|
<u-icon bold color="#999999" size="30" name="arrow-right"></u-icon>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="tabList">
|
<view class="tabList">
|
||||||
<div
|
<view class="tabItem" :class="active == 0 ? 'active' : ''" @click="changeTab(0)">
|
||||||
class="tabItem"
|
|
||||||
:class="active == 0 ? 'active' : ''"
|
|
||||||
@click="changeTab(0)"
|
|
||||||
>
|
|
||||||
账单
|
账单
|
||||||
</div>
|
</view>
|
||||||
<div class="line"></div>
|
<view class="line"></view>
|
||||||
<div
|
<view class="tabItem" :class="active == 1 ? 'active' : ''" @click="changeTab(1)">
|
||||||
class="tabItem"
|
|
||||||
:class="active == 1 ? 'active' : ''"
|
|
||||||
@click="changeTab(1)"
|
|
||||||
>
|
|
||||||
缴费记录
|
缴费记录
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="homeMoney" v-if="active == 0">
|
<view class="homeMoney" v-if="active == 0">
|
||||||
<div class="homeMoney_box">
|
<view class="homeMoney_box">
|
||||||
<div class="homeMoney_box_left">
|
<view class="homeMoney_box_left">
|
||||||
<div class="homeMoney_box_left1">物业公积金</div>
|
<view class="homeMoney_box_left1">物业公积金</view>
|
||||||
<div class="homeMoney_box_left2">可抵扣账户金额</div>
|
<view class="homeMoney_box_left2">可抵扣账户金额</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="homeMoney_box_right">
|
<view class="homeMoney_box_right">
|
||||||
<div class="homeMoney_box_right1">
|
<view class="homeMoney_box_right1">
|
||||||
<span>¥</span>{{ balanceMoney }}
|
<span>¥</span>{{ balanceMoney }}
|
||||||
</div>
|
</view>
|
||||||
<div class="homeMoney_box_right2" @click="more(currentRoom)">
|
<view class="homeMoney_box_right2" @click="more(currentRoom)">
|
||||||
查看详情
|
查看详情
|
||||||
<div style="margin-left: 12rpx">
|
<view style="margin-left: 12rpx">
|
||||||
<u-icon
|
<u-icon bold color="#894B11" size="30" name="arrow-right"></u-icon>
|
||||||
bold
|
</view>
|
||||||
color="#894B11"
|
</view>
|
||||||
size="30"
|
</view>
|
||||||
name="arrow-right"
|
</view>
|
||||||
></u-icon>
|
</view>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="payList" v-if="active == 0">
|
<view class="payList" v-if="active == 0">
|
||||||
<div class="payItem" v-for="(item, index) in Bill" :key="index">
|
<view class="payItem" v-for="(item, index) in Bill" :key="index">
|
||||||
<div class="payItem_tit">
|
<view class="payItem_tit">
|
||||||
<div class="payItem_left">
|
<view class="payItem_left">
|
||||||
<checkbox
|
<checkbox :checked="item.check" @click="checkChange(item, index)"></checkbox>
|
||||||
:checked="item.check"
|
<view style="margin-left: 24rpx">{{ item.order_date }}年</view>
|
||||||
@click="checkChange(item, index)"
|
</view>
|
||||||
></checkbox>
|
<view class="payItem_right">
|
||||||
<div style="margin-left: 24rpx">{{ item.order_date }}年</div>
|
|
||||||
</div>
|
|
||||||
<div class="payItem_right">
|
|
||||||
<span>¥</span>
|
<span>¥</span>
|
||||||
<view class="payItem_money">{{ item.unpaid_amount }}</view>
|
<view class="payItem_money">{{ item.unpaid_amount }}</view>
|
||||||
<p>未缴</p>
|
<p>未缴</p>
|
||||||
|
|
||||||
<div style="margin-left: 40rpx" @click="changeCheck(item, index)">
|
<view style="margin-left: 40rpx" @click="changeCheck(item, index)">
|
||||||
<u-icon
|
<u-icon bold color="#894B11" size="30" name="arrow-down" v-if="!item.more"></u-icon>
|
||||||
bold
|
<u-icon bold color="#894B11" size="30" name="arrow-up" v-if="item.more"></u-icon>
|
||||||
color="#894B11"
|
</view>
|
||||||
size="30"
|
</view>
|
||||||
name="arrow-down"
|
</view>
|
||||||
v-if="!item.more"
|
<view v-if="item.more">
|
||||||
></u-icon>
|
<view class="payItem_List" v-for="(items, indes) in item.community_order_rows" :key="items.order_id">
|
||||||
<u-icon
|
<checkbox :checked="items.check" @click="itemsCheckChange(items, indes, index)"></checkbox>
|
||||||
bold
|
<view class="Item_time" v-if="items.billing_cycle == 1">
|
||||||
color="#894B11"
|
|
||||||
size="30"
|
|
||||||
name="arrow-up"
|
|
||||||
v-if="item.more"
|
|
||||||
></u-icon>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="item.more">
|
|
||||||
<div
|
|
||||||
class="payItem_List"
|
|
||||||
v-for="(items, indes) in item.community_order_rows"
|
|
||||||
:key="items.order_id"
|
|
||||||
>
|
|
||||||
<checkbox
|
|
||||||
:checked="items.check"
|
|
||||||
@click="itemsCheckChange(items, indes, index)"
|
|
||||||
></checkbox>
|
|
||||||
<div class="Item_time" v-if="items.billing_cycle == 1">
|
|
||||||
{{ items.order_date }}年
|
{{ items.order_date }}年
|
||||||
</div>
|
</view>
|
||||||
<div class="Item_time" v-if="items.billing_cycle == 2">
|
<view class="Item_time" v-if="items.billing_cycle == 2">
|
||||||
{{ items.order_datetime }}月
|
{{ items.order_datetime }}月
|
||||||
</div>
|
</view>
|
||||||
<div class="Item_type">
|
<view class="Item_type">
|
||||||
{{ items.community_fee_type ? items.community_fee_type.type_name : '' }}
|
{{ items.community_fee_type ? items.community_fee_type.type_name : '' }}
|
||||||
</div>
|
</view>
|
||||||
<div class="Item_money">¥{{ items.money }}</div>
|
<view class="Item_money">¥{{ items.money }}</view>
|
||||||
<div class="Item_status" v-if="items.status == 0">未付款</div>
|
<view class="Item_status" v-if="items.status == 0">未付款</view>
|
||||||
<div class="Item_status sucess" v-if="items.status == 1">
|
<view class="Item_status sucess" v-if="items.status == 1">
|
||||||
已付款
|
已付款
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<!-- 选择支付类型 -->
|
<!-- 选择支付类型 -->
|
||||||
<div class="payTypeList" v-if="active == 0">
|
<view class="payTypeList" v-if="active == 0">
|
||||||
<div class="PayTypeItem">
|
<view class="PayTypeItem">
|
||||||
<div class="PayTypeItem_left">
|
<view class="PayTypeItem_left">
|
||||||
<div class="PayTypeItem_img">
|
<view class="PayTypeItem_img">
|
||||||
<image
|
<image mode="aspectFill"
|
||||||
mode="aspectFill"
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png" alt="" />
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
|
</view>
|
||||||
alt=""
|
<view class="PayTypeItem_con">
|
||||||
/>
|
<view class="PayTypeItem_con_tit">微信支付</view>
|
||||||
</div>
|
<view class="PayTypeItem_con_msg">单笔支付限额:¥10000.00</view>
|
||||||
<div class="PayTypeItem_con">
|
</view>
|
||||||
<div class="PayTypeItem_con_tit">微信支付</div>
|
</view>
|
||||||
<div class="PayTypeItem_con_msg">单笔支付限额:¥10000.00</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="PayTypeItem_right">
|
<view class="PayTypeItem_right">
|
||||||
<radio :checked="payType == 1" @click="changePayType(1)"></radio>
|
<radio :checked="payType == 1" @click="changePayType(1)"></radio>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="line3"></div>
|
<view class="line3"></view>
|
||||||
<div class="PayTypeItem">
|
<view class="PayTypeItem">
|
||||||
<div class="PayTypeItem_left">
|
<view class="PayTypeItem_left">
|
||||||
<div class="PayTypeItem_img">
|
<view class="PayTypeItem_img">
|
||||||
<image
|
<image mode="aspectFill"
|
||||||
mode="aspectFill"
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_homeMoney.png" alt="" />
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_homeMoney.png"
|
</view>
|
||||||
alt=""
|
<view class="PayTypeItem_con">
|
||||||
/>
|
<view class="PayTypeItem_con_tit">物业公积金支付</view>
|
||||||
</div>
|
<view class="PayTypeItem_con_msg">
|
||||||
<div class="PayTypeItem_con">
|
|
||||||
<div class="PayTypeItem_con_tit">物业公积金支付</div>
|
|
||||||
<div class="PayTypeItem_con_msg">
|
|
||||||
可用公积金:<span>¥</span>{{ balanceMoney }}
|
可用公积金:<span>¥</span>{{ balanceMoney }}
|
||||||
<div class="PayTypeItem_con_msg2" @click="changeShow2">
|
<view class="PayTypeItem_con_msg2" @click="changeShow2">
|
||||||
可组合支付
|
可组合支付
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="PayTypeItem_right">
|
<view class="PayTypeItem_right">
|
||||||
<radio :checked="payType == 2" @click="changePayType(2)"></radio>
|
<radio :checked="payType == 2" @click="changePayType(2)"></radio>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="bottom" v-if="active == 0">
|
<view class="bottom" v-if="active == 0">
|
||||||
<div class="bottom_left">
|
<view class="bottom_left">
|
||||||
<span>合计</span>
|
<span>合计</span>
|
||||||
<p>¥</p>
|
<p>¥</p>
|
||||||
{{ currentMoney }}
|
{{ currentMoney }}
|
||||||
</div>
|
</view>
|
||||||
<div class="bottom_right" @click="OrderPay">立即支付</div>
|
<view class="bottom_right" @click="createPay">立即支付</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="payHisList" v-if="active == 1">
|
<view class="payHisList" v-if="active == 1">
|
||||||
<div class="payHisItem" v-for="item in payOrderList" :key="item.id">
|
<view class="payHisItem" v-for="item in payOrderList" :key="item.id">
|
||||||
<div class="row">
|
<view class="row">
|
||||||
<div class="row_label">缴费金额</div>
|
<view class="row_label">缴费金额</view>
|
||||||
<div class="row_con1">¥{{ item.money }}</div>
|
<view class="row_con1">¥{{ item.money }}</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="row">
|
<view class="row">
|
||||||
<div class="row_label2"></div>
|
<view class="row_label2"></view>
|
||||||
<div class="row_con2">{{ item.pay_time }}支付</div>
|
<view class="row_con2">{{ item.pay_time }}支付</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="line4"></div>
|
<view class="line4"></view>
|
||||||
<div class="row">
|
<view class="row">
|
||||||
<div class="row_label">绑定房源</div>
|
<view class="row_label">绑定房源</view>
|
||||||
<div class="row_con3">
|
<view class="row_con3">
|
||||||
<div class="row_con3_1">
|
<view class="row_con3_1">
|
||||||
{{ item.community_order.length }}个账单
|
{{ item.community_order.length }}个账单
|
||||||
</div>
|
</view>
|
||||||
<div class="row_con3_2">明细可从收据查看</div>
|
<view class="row_con3_2">明细可从收据查看</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="row">
|
<view class="row">
|
||||||
<div class="row_label">应缴费金额</div>
|
<view class="row_label">应缴费金额</view>
|
||||||
<div class="row_con4">¥{{ item.money }}</div>
|
<view class="row_con4">¥{{ item.money }}</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="row">
|
<view class="row">
|
||||||
<div class="row_label">物业费公积金抵扣金额</div>
|
<view class="row_label">物业费公积金抵扣金额</view>
|
||||||
<div class="row_con4">-¥{{ item.reduction_money }}</div>
|
<view class="row_con4">-¥{{ item.reduction_money }}</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="row">
|
<view class="row">
|
||||||
<div class="row_label">缴费单号</div>
|
<view class="row_label">缴费单号</view>
|
||||||
<div class="row_con4">{{ item.order_pay_no }}</div>
|
<view class="row_con4">{{ item.order_pay_no }}</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="line4"></div>
|
<view class="line4"></view>
|
||||||
<div class="Receipt">收据</div>
|
<view class="Receipt">收据</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="boxshadow" v-if="show" @click="changeShow">
|
<view class="boxshadow" v-if="show" @click="changeShow">
|
||||||
<div class="boxshadowCon">
|
<view class="boxshadowCon">
|
||||||
<div class="boxshadowCon_Tit">
|
<view class="boxshadowCon_Tit">
|
||||||
选择房源
|
选择房源
|
||||||
<div class="cancel" @click.stop="show = false">取消</div>
|
<view class="cancel" @click.stop="show = false">取消</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="lines"></div>
|
<view class="lines"></view>
|
||||||
<div class="communityList" v-if="roomList.length > 0">
|
<view class="communityList" v-if="roomList.length > 0">
|
||||||
<div
|
<view class="communityItem" v-for="item in roomList" :key="item.room_id" @click="selectRoom(item)">
|
||||||
class="communityItem"
|
<view class="communityItem_text">
|
||||||
v-for="item in roomList"
|
|
||||||
:key="item.room_id"
|
|
||||||
@click="selectRoom(item)"
|
|
||||||
>
|
|
||||||
<div class="communityItem_text">
|
|
||||||
{{ item.facility_name }}{{ item.floor }} {{ item.number }}
|
{{ item.facility_name }}{{ item.floor }} {{ item.number }}
|
||||||
</div>
|
</view>
|
||||||
<div class="communityItem_radio">
|
<view class="communityItem_radio">
|
||||||
<radio :checked="selectedRoomId === item.room_id"></radio>
|
<radio :checked="selectedRoomId === item.room_id"></radio>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="communityList" v-else>
|
<view class="communityList" v-else>
|
||||||
<div class="communityItem">
|
<view class="communityItem">
|
||||||
<div class="communityItem_text">暂无房源</div>
|
<view class="communityItem_text">暂无房源</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="boxshadow" v-if="show2" @click="changeShow2">
|
<view class="boxshadow" v-if="show2" @click="changeShow2">
|
||||||
<div class="boxshadowCon">
|
<view class="boxshadowCon">
|
||||||
<div class="boxshadowCon_Tit">
|
<view class="boxshadowCon_Tit">
|
||||||
付款总金额
|
付款总金额
|
||||||
<div class="cancel" @click.stop="show2 = false">取消</div>
|
<view class="cancel" @click.stop="show2 = false">取消</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="boxshadowCon_subTit">
|
<view class="boxshadowCon_subTit">
|
||||||
<p>¥</p>
|
<p>¥</p>
|
||||||
{{ currentMoney }}
|
{{ currentMoney }}
|
||||||
</div>
|
</view>
|
||||||
<div class="lines"></div>
|
<view class="lines"></view>
|
||||||
|
|
||||||
<div class="BanlenceList">
|
<view class="BanlenceList">
|
||||||
<div class="banlenceItem">
|
<view class="banlenceItem">
|
||||||
<div class="banlenceItem_left">
|
<view class="banlenceItem_left">
|
||||||
<image
|
<image mode="aspectFill"
|
||||||
mode="aspectFill"
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png" alt="" />
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
微信支付
|
微信支付
|
||||||
</div>
|
</view>
|
||||||
<div class="banlenceItem_right">
|
<view class="banlenceItem_right">
|
||||||
<span>¥</span>{{ (currentMoney - balanceMoney).toFixed(2) }}
|
<span>¥</span>{{ (currentMoney - balanceMoney).toFixed(2) }}
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="line3"></div>
|
<view class="line3"></view>
|
||||||
<div class="banlenceItem">
|
<view class="banlenceItem">
|
||||||
<div class="banlenceItem_left">
|
<view class="banlenceItem_left">
|
||||||
<image
|
<image mode="aspectFill"
|
||||||
mode="aspectFill"
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_homeMoney.png" alt="" />
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_homeMoney.png"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
物业公积金支付
|
物业公积金支付
|
||||||
</div>
|
</view>
|
||||||
<div class="banlenceItem_right">
|
<view class="banlenceItem_right">
|
||||||
<span>¥</span>{{ balanceMoney }}
|
<span>¥</span>{{ balanceMoney }}
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="btn" @click="OrderPay">
|
<view class="btn" @click="createPay">
|
||||||
物业公积金+微信支付 <span>¥</span>{{ currentMoney }}
|
物业公积金+微信支付 <span>¥</span>{{ currentMoney }}
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -533,7 +469,7 @@ export default {
|
|||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
console.log(res);
|
console.log(res);
|
||||||
this.payInfoId = res.id;
|
this.payInfoId = res.id;
|
||||||
this.getPayInfo();
|
this.OrderPay();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
//根据支付订单查询交易信息
|
//根据支付订单查询交易信息
|
||||||
@ -547,15 +483,22 @@ export default {
|
|||||||
//预下单
|
//预下单
|
||||||
async OrderPay() {
|
async OrderPay() {
|
||||||
// this.payInfoId
|
// this.payInfoId
|
||||||
await request(apiArr.OrderPay, "POST", { order_pay_id: 6 }).then(
|
await request(apiArr.OrderPay, "POST", { order_pay_id: this.payInfoId }).then(
|
||||||
|
async (res) => {
|
||||||
|
const params = {
|
||||||
|
order_pay_id: this.payInfoId,
|
||||||
|
}
|
||||||
|
await request(apiArr.OrderPay, "POST", params).then(
|
||||||
(res) => {
|
(res) => {
|
||||||
console.log(res);
|
}
|
||||||
|
);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
//支付记录
|
//支付记录
|
||||||
getPayList() {
|
getPayList() {
|
||||||
|
|
||||||
request(apiArr.getPayOrderList, "POST", {
|
request(apiArr.getPayOrderList, "POST", {
|
||||||
room_id: this.currentRoom.room_id,
|
room_id: this.currentRoom.room_id,
|
||||||
page_num: this.page_num,
|
page_num: this.page_num,
|
||||||
@ -569,7 +512,7 @@ export default {
|
|||||||
flag = false;
|
flag = false;
|
||||||
}
|
}
|
||||||
this.flag = flag;
|
this.flag = flag;
|
||||||
this.payOrderList = this.payOrderList.concat(res.rows);
|
this.payOrderList = res.rows;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
/* .box{
|
||||||
|
padding-bottom: 100rpx;
|
||||||
|
} */
|
||||||
|
|
||||||
.searchBox {
|
.searchBox {
|
||||||
padding-bottom: 24rpx;
|
padding-bottom: 24rpx;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
@ -65,6 +69,10 @@
|
|||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.orderListBox{
|
||||||
|
padding-bottom: 220rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.orderList {
|
.orderList {
|
||||||
margin-top: 20rpx;
|
margin-top: 20rpx;
|
||||||
@ -167,7 +175,11 @@ page {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-top: 200rpx;
|
position: fixed;
|
||||||
|
bottom: 100rpx;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 99;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -25,7 +25,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view v-if="list.length !== 0">
|
<view v-if="list.length !== 0" class="orderListBox">
|
||||||
<view class="orderList" v-for="(item, index) in list" :key="index">
|
<view class="orderList" v-for="(item, index) in list" :key="index">
|
||||||
<view class="orderItem" @click="handlerDetailClick(item.id)">
|
<view class="orderItem" @click="handlerDetailClick(item.id)">
|
||||||
<view :class="['orderItemTit', statusType[item.status].style]">
|
<view :class="['orderItemTit', statusType[item.status].style]">
|
||||||
@ -140,10 +140,10 @@ export default {
|
|||||||
async init() {
|
async init() {
|
||||||
const [awaitingNumb, underwayNum, doneNum, discardNum] =
|
const [awaitingNumb, underwayNum, doneNum, discardNum] =
|
||||||
await Promise.all([
|
await Promise.all([
|
||||||
this.awaitingRes(),
|
this.awaitingRes(1),
|
||||||
this.underwayRes(),
|
this.awaitingRes(2),
|
||||||
this.doneRes(),
|
this.awaitingRes(3),
|
||||||
this.discardRes(),
|
this.awaitingRes(4),
|
||||||
]);
|
]);
|
||||||
this.awaitingNumb = awaitingNumb;
|
this.awaitingNumb = awaitingNumb;
|
||||||
this.underwayNum = underwayNum;
|
this.underwayNum = underwayNum;
|
||||||
@ -152,6 +152,7 @@ export default {
|
|||||||
},
|
},
|
||||||
async getTabsList() {
|
async getTabsList() {
|
||||||
const res = await request(apiArr.getWorkOrderCrudList, "POST", {
|
const res = await request(apiArr.getWorkOrderCrudList, "POST", {
|
||||||
|
community_id: Number(uni.getStorageSync("changeCommData").id),
|
||||||
status: this.active,
|
status: this.active,
|
||||||
page_num: this.page_num,
|
page_num: this.page_num,
|
||||||
page_size: this.page_size,
|
page_size: this.page_size,
|
||||||
@ -170,36 +171,10 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 待维修工单数量
|
// 待维修工单数量
|
||||||
async awaitingRes() {
|
async awaitingRes(status) {
|
||||||
const res = await request(apiArr.getWorkOrderCrudList, "POST", {
|
const res = await request(apiArr.getWorkOrderCrudList, "POST", {
|
||||||
status: 1,
|
community_id: Number(uni.getStorageSync("changeCommData").id),
|
||||||
page_num: this.page_num,
|
status: status,
|
||||||
page_size: this.page_size,
|
|
||||||
});
|
|
||||||
return res.total;
|
|
||||||
},
|
|
||||||
// 进行中工单数量
|
|
||||||
async underwayRes() {
|
|
||||||
const res = await request(apiArr.getWorkOrderCrudList, "POST", {
|
|
||||||
status: 2,
|
|
||||||
page_num: this.page_num,
|
|
||||||
page_size: this.page_size,
|
|
||||||
});
|
|
||||||
return res.total;
|
|
||||||
},
|
|
||||||
// 已废弃工单数量
|
|
||||||
async discardRes() {
|
|
||||||
const res = await request(apiArr.getWorkOrderCrudList, "POST", {
|
|
||||||
status: 4,
|
|
||||||
page_num: this.page_num,
|
|
||||||
page_size: this.page_size,
|
|
||||||
});
|
|
||||||
return res.total;
|
|
||||||
},
|
|
||||||
// 已完成工单数量
|
|
||||||
async doneRes() {
|
|
||||||
const res = await request(apiArr.getWorkOrderCrudList, "POST", {
|
|
||||||
status: 3,
|
|
||||||
page_num: this.page_num,
|
page_num: this.page_num,
|
||||||
page_size: this.page_size,
|
page_size: this.page_size,
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,667 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view>
|
|
||||||
<view class="express">
|
|
||||||
<!-- Step Navigation -->
|
|
||||||
<view class="strideList">
|
|
||||||
<view class="strideItem" :class="{active: step == 1}" @tap="changeItem(1)">基础<br />信息</view>
|
|
||||||
|
|
||||||
<view class="icons">
|
|
||||||
<image
|
|
||||||
:src="step != 2 ? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/play_1.png' : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/play_2.png'"
|
|
||||||
mode="widthFix" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="strideItem" :class="{active: step == 2}" @tap="changeItem(2)">病历<br />信息</view>
|
|
||||||
|
|
||||||
<view class="icons">
|
|
||||||
<image
|
|
||||||
:src="step != 3 ? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/play_1.png' : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/play_2.png'"
|
|
||||||
mode="widthFix" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="strideItem" :class="{active: step == 3}" @tap="changeItem(3)">生活<br />方式</view>
|
|
||||||
|
|
||||||
<view class="icons">
|
|
||||||
<image
|
|
||||||
:src="step != 4 ? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/play_1.png' : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/play_2.png'"
|
|
||||||
mode="widthFix" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="strideItem" :class="{active: step == 4}" @tap="changeItem(4)">授权<br />用户</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- Step 1: Basic Information -->
|
|
||||||
<view class="basic" v-if="step == 1">
|
|
||||||
<view class="basic_row">
|
|
||||||
<view class="basic_row_tit">姓名</view>
|
|
||||||
<view class="basic_row_con">
|
|
||||||
<input v-model="name" placeholder="请填写您的姓名" placeholder-style="color: #999999;font-size: 26rpx" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="basic_row">
|
|
||||||
<view class="basic_row_tit">电话</view>
|
|
||||||
<view class="basic_row_con">
|
|
||||||
<input v-model="phone" type="number" maxlength="11" placeholder="请填写您的电话"
|
|
||||||
placeholder-style="color: #999999;font-size: 26rpx" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="basic_row">
|
|
||||||
<view class="basic_row_tit">性别</view>
|
|
||||||
<view class="basic_row_con">
|
|
||||||
<view class="sex" :class="{active2: sex == 'man'}" @tap="changeSex('man')">
|
|
||||||
<view class="cir"></view>男
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="sex" :class="{active2: sex == 'woman'}" @tap="changeSex('woman')">
|
|
||||||
<view class="cir"></view>女
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="basic_row">
|
|
||||||
<view class="basic_row_tit">出生日期</view>
|
|
||||||
<view class="basic_row_con" @tap="changeShow">
|
|
||||||
<input v-model="time" disabled placeholder="请选择您的出生日期"
|
|
||||||
placeholder-style="color: #999999;font-size: 26rpx" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="basic_row">
|
|
||||||
<view class="basic_row_tit">身高</view>
|
|
||||||
<view class="basic_row_con">
|
|
||||||
<input v-model="height" placeholder="请填写身高(单位cm)" placeholder-style="color: #999999;font-size: 26rpx" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="basic_row none">
|
|
||||||
<view class="basic_row_tit">体重</view>
|
|
||||||
<view class="basic_row_con">
|
|
||||||
<input v-model="weight" placeholder="请填写体重(单位Kg)" placeholder-style="color: #999999;font-size: 26rpx" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="btn" @click="headerStepClick">下一步</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- Step 2: Medical Information -->
|
|
||||||
<view class="infomation" v-if="step == 2">
|
|
||||||
<view class="basic_row">
|
|
||||||
<view class="basic_row_tit">血值类型</view>
|
|
||||||
<view class="basic_row_con" @tap="changeShow2('bloodType', '血脂类型')">
|
|
||||||
<input v-model="bloodType" disabled placeholder="请选择您的血值类型"
|
|
||||||
placeholder-style="color: #999999;font-size: 26rpx" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="basic_row">
|
|
||||||
<view class="basic_row_tit">糖尿病类型</view>
|
|
||||||
<view class="basic_row_con" @tap="changeShow2('diabetesType', '糖尿病类型')">
|
|
||||||
<input v-model="diabetesType" disabled placeholder="请选择您的糖尿病类型"
|
|
||||||
placeholder-style="color: #999999;font-size: 26rpx" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="basic_row">
|
|
||||||
<view class="basic_row_tit">血压类型</view>
|
|
||||||
<view class="basic_row_con" @tap="changeShow2('bloodPressure', '血压类型')">
|
|
||||||
<input v-model="bloodPressure" disabled placeholder="请选择您的血压类型"
|
|
||||||
placeholder-style="color: #999999;font-size: 26rpx" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="basic_row2">
|
|
||||||
<view class="basic_row_tit">既往病史</view>
|
|
||||||
<view class="illnessList">
|
|
||||||
<view class="illnessItem" :class="{checked: pastCase === 'a'}" @tap="headerInputClick2('pastCase', 'a')">胸闷
|
|
||||||
</view>
|
|
||||||
<view class="illnessItem" :class="{checked: pastCase === 'b'}" @tap="headerInputClick2('pastCase', 'b')">心慌
|
|
||||||
</view>
|
|
||||||
<view class="illnessItem" :class="{checked: pastCase === 'c'}" @tap="headerInputClick2('pastCase', 'c')">头晕
|
|
||||||
</view>
|
|
||||||
<view class="illnessItem" :class="{checked: pastCase === 'd'}" @tap="headerInputClick2('pastCase', 'd')">痛风
|
|
||||||
</view>
|
|
||||||
<view class="illnessItem" :class="{checked: pastCase === 'e'}" @tap="headerInputClick2('pastCase', 'e')">
|
|
||||||
脑血管疾病</view>
|
|
||||||
<view class="illnessItem" :class="{checked: pastCase === 'f'}" @tap="headerInputClick2('pastCase', 'f')">
|
|
||||||
急性并发症</view>
|
|
||||||
<view class="illnessItem" :class="{checked: pastCase === 'g'}" @tap="headerInputClick2('pastCase', 'g')">
|
|
||||||
心脏疾病</view>
|
|
||||||
<view class="illnessItem" :class="{checked: pastCase === 'h'}" @tap="headerInputClick2('pastCase', 'h')">其他
|
|
||||||
</view>
|
|
||||||
<!-- 其他病史选项... -->
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="basic_row2">
|
|
||||||
<view class="basic_row_tit">既往用药</view>
|
|
||||||
<view class="drugList">
|
|
||||||
<view class="drugItem" :class="{checked: pharmacy === 'a'}" @tap="headerInputClick2('pharmacy', 'a')">他汀类降脂药
|
|
||||||
</view>
|
|
||||||
<view class="drugItem" :class="{checked: pharmacy === 'b'}" @tap="headerInputClick2('pharmacy', 'b')">中药降脂
|
|
||||||
</view>
|
|
||||||
<view class="drugItem" :class="{checked: pharmacy === 'c'}" @tap="headerInputClick2('pharmacy', 'c')">中药降酸药
|
|
||||||
</view>
|
|
||||||
<view class="drugItem" :class="{checked: pharmacy === 'd'}" @tap="headerInputClick2('pharmacy', 'd')">其他
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="basic_row none">
|
|
||||||
<view class="basic_row_tit">用药时间</view>
|
|
||||||
<view class="basic_row_con">
|
|
||||||
<view class="sex" :class="{active2: drugTime == '3'}" @tap="changeTime('3')">
|
|
||||||
<view class="cir"></view>3年
|
|
||||||
</view>
|
|
||||||
<view class="sex" :class="{active2: drugTime == '1'}" @tap="changeTime('1')">
|
|
||||||
<view class="cir"></view>一年以内
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="btn" @click="headerStepClick">下一步</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- Step 3: Lifestyle -->
|
|
||||||
<view class="life" v-if="step == 3">
|
|
||||||
<!-- 生活方式表单内容... -->
|
|
||||||
|
|
||||||
|
|
||||||
<view class="basic_row3" style="margin-top: 20rpx;">
|
|
||||||
<view class="basic_row_tit">吸烟情况</view>
|
|
||||||
<view class="basic_row_con3">
|
|
||||||
<view class="sex" :class="{ active2: smoke === 'no' }" @click="handleSelect('smoke', 'no')">
|
|
||||||
<view class="cir"></view>从不
|
|
||||||
</view>
|
|
||||||
<view class="sex" :class="{ active2: smoke === 'ring' }" @click="handleSelect('smoke', 'ring')">
|
|
||||||
<view class="cir"></view>已戒烟
|
|
||||||
</view>
|
|
||||||
<view class="sex" :class="{ active2: smoke === 'yes' }" @click="handleSelect('smoke', 'yes')">
|
|
||||||
<view class="cir"></view>吸烟
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 饮酒情况 -->
|
|
||||||
<view class="basic_row3">
|
|
||||||
<view class="basic_row_tit">饮酒情况</view>
|
|
||||||
<view class="basic_row_con3">
|
|
||||||
<view class="sex" :class="{ active2: drink === 'no' }" @click="handleSelect('drink', 'no')">
|
|
||||||
<view class="cir"></view>从不
|
|
||||||
</view>
|
|
||||||
<view class="sex" :class="{ active2: drink === 'once' }" @click="handleSelect('drink', 'once')">
|
|
||||||
<view class="cir"></view>偶尔
|
|
||||||
</view>
|
|
||||||
<view class="sex" :class="{ active2: drink === 'yes' }" @click="handleSelect('drink', 'yes')">
|
|
||||||
<view class="cir"></view>经常
|
|
||||||
</view>
|
|
||||||
<view class="sex" :class="{ active2: drink === 'ring' }" @click="handleSelect('drink', 'ring')">
|
|
||||||
<view class="cir"></view>戒酒
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 日常工作 -->
|
|
||||||
<view class="basic_row3">
|
|
||||||
<view class="basic_row_tit">日常工作</view>
|
|
||||||
<view class="basic_row_con3">
|
|
||||||
<view class="sex" :class="{ active2: dailyWork === 'easy' }" @click="handleSelect('dailyWork', 'easy')">
|
|
||||||
<view class="cir"></view>轻体力劳动
|
|
||||||
</view>
|
|
||||||
<view class="sex" :class="{ active2: dailyWork === 'in' }" @click="handleSelect('dailyWork', 'in')">
|
|
||||||
<view class="cir"></view>中体力劳动
|
|
||||||
</view>
|
|
||||||
<view class="sex" :class="{ active2: dailyWork === 'repeat' }" @click="handleSelect('dailyWork', 'repeat')">
|
|
||||||
<view class="cir"></view>重体力劳动
|
|
||||||
</view>
|
|
||||||
<view class="sex" :class="{ active2: dailyWork === 'rest' }" @click="handleSelect('dailyWork', 'rest')">
|
|
||||||
<view class="cir"></view>休息
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 运动情况 -->
|
|
||||||
<view class="basic_row3">
|
|
||||||
<view class="basic_row_tit">运动情况</view>
|
|
||||||
<view class="basic_row_con3">
|
|
||||||
<view class="sex" :class="{ active2: motion === 'lack' }" @click="handleSelect('motion', 'lack')">
|
|
||||||
<view class="cir"></view>≤2次
|
|
||||||
</view>
|
|
||||||
<view class="sex" :class="{ active2: motion === 'once' }" @click="handleSelect('motion', 'once')">
|
|
||||||
<view class="cir"></view>3-5次
|
|
||||||
</view>
|
|
||||||
<view class="sex" :class="{ active2: motion === 'days' }" @click="handleSelect('motion', 'days')">
|
|
||||||
<view class="cir"></view>每天
|
|
||||||
</view>
|
|
||||||
<view class="sex" :class="{ active2: motion === 'no' }" @click="handleSelect('motion', 'no')">
|
|
||||||
<view class="cir"></view>无运动
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 睡眠情况 -->
|
|
||||||
<view class="basic_row3 none">
|
|
||||||
<view class="basic_row_tit">睡眠情况</view>
|
|
||||||
<view class="basic_row_con3">
|
|
||||||
<view class="sex" :class="{ active2: sleep === 'law' }" @click="handleSelect('sleep', 'law')">
|
|
||||||
<view class="cir"></view>规律
|
|
||||||
</view>
|
|
||||||
<view class="sex" :class="{ active2: sleep === 'noLaw' }" @click="handleSelect('sleep', 'noLaw')">
|
|
||||||
<view class="cir"></view>熬夜
|
|
||||||
</view>
|
|
||||||
<view class="sex" :class="{ active2: sleep === 'overturn' }" @click="handleSelect('sleep', 'overturn')">
|
|
||||||
<view class="cir"></view>黑白颠倒
|
|
||||||
</view>
|
|
||||||
<view class="sex" :class="{ active2: sleep === 'rest' }" @click="handleSelect('sleep', 'rest')">
|
|
||||||
<view class="cir"></view>其他
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
|
|
||||||
<view class="btn" @click="headerStepClick">下一步</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- Step 4: Authorization -->
|
|
||||||
<view class="user" v-if="step == 4">
|
|
||||||
<!-- 授权表单内容... -->
|
|
||||||
|
|
||||||
<view class="basic_row3 none">
|
|
||||||
<view class="basic_row_tit">档案授权</view>
|
|
||||||
<view class="basic_row_con2">
|
|
||||||
<view
|
|
||||||
class="sex"
|
|
||||||
:class="{ active2: accredit === 'owner' }"
|
|
||||||
@click="handleSelect('accredit', 'owner')"
|
|
||||||
>
|
|
||||||
<view class="cir"></view>对所有人员开放
|
|
||||||
</view>
|
|
||||||
<view
|
|
||||||
class="sex"
|
|
||||||
:class="{ active2: accredit === 'family' }"
|
|
||||||
@click="handleSelect('accredit', 'family')"
|
|
||||||
>
|
|
||||||
<view class="cir"></view>对家庭成员开放
|
|
||||||
</view>
|
|
||||||
<view
|
|
||||||
class="sex"
|
|
||||||
:class="{ active2: accredit === 'serve' }"
|
|
||||||
@click="handleSelect('accredit', 'serve')"
|
|
||||||
>
|
|
||||||
<view class="cir"></view>对服务人员开放
|
|
||||||
</view>
|
|
||||||
<view
|
|
||||||
class="sex"
|
|
||||||
:class="{ active2: accredit === 'oneself' }"
|
|
||||||
@click="handleSelect('accredit', 'oneself')"
|
|
||||||
>
|
|
||||||
<view class="cir"></view>只允许自己查看
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
|
|
||||||
<view class="btn" bind:tap="headerSubmitClick">提交</view>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- Date Picker Popup -->
|
|
||||||
<u-popup :show="show" mode="bottom" round close-on-click-overlay>
|
|
||||||
<view style="width: 100%;">
|
|
||||||
<u-datetime-picker mode="date" :show="show" :formatter="formatter" @cancel="onClose"
|
|
||||||
@confirm="onInput"></u-datetime-picker>
|
|
||||||
</view>
|
|
||||||
</u-popup>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Blood Type Picker Popup -->
|
|
||||||
<u-popup :show="show2" mode="bottom" round close-on-click-overlay>
|
|
||||||
<view style="width: 100%;">
|
|
||||||
<u-picker :columns="columns" :show="show2" :title="PopupTitle" @confirm="onInput2" @cancel="onClose2"
|
|
||||||
show-toolbar></u-picker>
|
|
||||||
</view>
|
|
||||||
</u-popup>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
step: 1,
|
|
||||||
name: '',
|
|
||||||
phone: '',
|
|
||||||
sex: '',
|
|
||||||
time: '',
|
|
||||||
height: '',
|
|
||||||
weight: '',
|
|
||||||
bloodType: '',
|
|
||||||
diabetesType: '',
|
|
||||||
bloodPressure: '',
|
|
||||||
pastCase: '',
|
|
||||||
pharmacy: '',
|
|
||||||
drugTime: '',
|
|
||||||
smoke: '',
|
|
||||||
drink: '',
|
|
||||||
dailyWork: '',
|
|
||||||
motion: '',
|
|
||||||
sleep: '',
|
|
||||||
accredit: '',
|
|
||||||
show: false,
|
|
||||||
show2: false,
|
|
||||||
currentDate: new Date().getTime(),
|
|
||||||
popupType: '',
|
|
||||||
PopupTitle: '',
|
|
||||||
columns: [], // Your picker options
|
|
||||||
formatter(type, value) {
|
|
||||||
if (type === 'year') {
|
|
||||||
return `${value}年`;
|
|
||||||
}
|
|
||||||
if (type === 'month') {
|
|
||||||
return `${value}月`;
|
|
||||||
}
|
|
||||||
if (type === 'day') {
|
|
||||||
return `${value}日`;
|
|
||||||
}
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
changeItem(step) {
|
|
||||||
this.step = step;
|
|
||||||
},
|
|
||||||
changeSex(sex) {
|
|
||||||
this.sex = sex;
|
|
||||||
},
|
|
||||||
changeTime(time) {
|
|
||||||
this.drugTime = time;
|
|
||||||
},
|
|
||||||
changeShow() {
|
|
||||||
this.show = true;
|
|
||||||
console.log(this.show, 'asdasd');
|
|
||||||
},
|
|
||||||
changeShow2(type, title) {
|
|
||||||
this.popupType = type;
|
|
||||||
this.PopupTitle = title;
|
|
||||||
this.show2 = true;
|
|
||||||
},
|
|
||||||
headerInputClick(e) {
|
|
||||||
this[e.currentTarget.dataset.name] = e.detail.value;
|
|
||||||
},
|
|
||||||
headerInputClick2(name, val) {
|
|
||||||
this[name] = val;
|
|
||||||
},
|
|
||||||
headerStepClick() {
|
|
||||||
this.step++;
|
|
||||||
},
|
|
||||||
headerSubmitClick() {
|
|
||||||
// Submit logic
|
|
||||||
},
|
|
||||||
onClose() {
|
|
||||||
this.show = false;
|
|
||||||
},
|
|
||||||
onClose2() {
|
|
||||||
this.show2 = false;
|
|
||||||
},
|
|
||||||
onInput(e) {
|
|
||||||
this.time = this.$u.timeFormat(e.value, 'yyyy-mm-dd');
|
|
||||||
this.show = false;
|
|
||||||
},
|
|
||||||
onInput2(e) {
|
|
||||||
this[this.popupType] = e[0];
|
|
||||||
this.show2 = false;
|
|
||||||
},
|
|
||||||
handleSelect(name,val) {
|
|
||||||
console.log(name,val);
|
|
||||||
this[name] = val;
|
|
||||||
return;
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.strideList {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin: 0 43rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.strideItem {
|
|
||||||
width: 120rpx;
|
|
||||||
height: 120rpx;
|
|
||||||
background: #D9D9D9;
|
|
||||||
border-radius: 50%;
|
|
||||||
overflow: hidden;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: #FFFFFF;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icons {
|
|
||||||
width: 26rpx;
|
|
||||||
height: 26rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
background: #FF512A;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.strideList {
|
|
||||||
margin-top: 42rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.basic {
|
|
||||||
margin: 0 20rpx;
|
|
||||||
margin-top: 62rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.basic_row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
border-bottom: 1rpx solid #E6E6E6;
|
|
||||||
height: 90rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.basic_row_tit {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #222222;
|
|
||||||
}
|
|
||||||
|
|
||||||
.basic_row_con {
|
|
||||||
text-align: right;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.basic_row_con input {
|
|
||||||
height: 90rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sex {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #222222;
|
|
||||||
margin-left: 40rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cir {
|
|
||||||
width: 30rpx;
|
|
||||||
height: 30rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 1rpx solid #555555;
|
|
||||||
margin-right: 16rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active2 .cir {
|
|
||||||
background-color: #ff512a;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.none {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 36rpx;
|
|
||||||
color: #FFFFFF;
|
|
||||||
width: 650rpx;
|
|
||||||
height: 80rpx;
|
|
||||||
background: #FF512A;
|
|
||||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-top: 64rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.infomation {
|
|
||||||
margin: 0 20rpx;
|
|
||||||
margin-top: 92rpx;
|
|
||||||
padding-bottom: 60rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.basic_row2 {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding-top: 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.illnessItem {
|
|
||||||
width: 150rpx;
|
|
||||||
height: 50rpx;
|
|
||||||
background: #F0F0F0;
|
|
||||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #999999;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-right: 20rpx;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.illnessList {
|
|
||||||
margin-top: 30rpx;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.basic_row2 .ipts {
|
|
||||||
border-bottom: 1rpx solid #E6E6E6;
|
|
||||||
padding: 30rpx 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drugList {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-top: 25rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drugItem {
|
|
||||||
background: #F0F0F0;
|
|
||||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #999999;
|
|
||||||
padding: 10rpx;
|
|
||||||
margin-right: 20rpx;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checked {
|
|
||||||
background: #FF512A;
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.life {
|
|
||||||
margin: 0 52rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.life .basic_row {
|
|
||||||
width: 100%;
|
|
||||||
justify-content: flex-start;
|
|
||||||
min-height: 90rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.life .basic_row_tit {
|
|
||||||
white-space: nowrap;
|
|
||||||
margin-right: 32rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.life .basic_row_con {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.life .sex {
|
|
||||||
margin: 15rpx 0;
|
|
||||||
margin-right: 16rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.basic_row_con3 {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.basic_row3 {
|
|
||||||
min-height: 90rpx;
|
|
||||||
display: flex;
|
|
||||||
padding-top: 30rpx;
|
|
||||||
padding-bottom: 30rpx;
|
|
||||||
align-items: flex-start;
|
|
||||||
border-bottom: 1rpx solid #E6E6E6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.basic_row_con3 .sex {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.life .none {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user {
|
|
||||||
margin: 0 52rpx;
|
|
||||||
margin-top: 92rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user .none {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user .sex {
|
|
||||||
margin-bottom: 30rpx;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,611 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="headlth">
|
|
||||||
<!-- Swiper Section -->
|
|
||||||
<view class="swiper">
|
|
||||||
<swiper :autoplay="true" :interval="3000" :duration="500">
|
|
||||||
<swiper-item>
|
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/health_img.png" mode="widthFix" />
|
|
||||||
</swiper-item>
|
|
||||||
</swiper>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- Tab List -->
|
|
||||||
<view class="tabList">
|
|
||||||
<view class="tabItem" v-for="(item, index) in tabList" :key="index" @tap="jump(item.url)">
|
|
||||||
<view class="tabImg">
|
|
||||||
<image :src="item.img" mode="heightFix" />
|
|
||||||
</view>
|
|
||||||
<view class="tabName">
|
|
||||||
{{item.name}}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="gray"></view>
|
|
||||||
|
|
||||||
<!-- Hot Services -->
|
|
||||||
<view class="tit">
|
|
||||||
热门服务
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="serviceTag">
|
|
||||||
<view class="serviceTagItem" v-for="(service, idx) in healthServices" :key="idx">
|
|
||||||
<view class="serviceTagItem_name">{{service.name}}</view>
|
|
||||||
<view class="serviceTagItem_msg">{{service.value}}</view>
|
|
||||||
<view :class="'serviceTagItem_img' + (idx+1)">
|
|
||||||
<image :src="service.icon" mode="widthFix" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="gray"></view>
|
|
||||||
|
|
||||||
<!-- Tabs -->
|
|
||||||
<view class="tabs">
|
|
||||||
<view class="tab" :class="{active: tabIndex == 0}" @tap="changeTab(0)">服务列表</view>
|
|
||||||
<view class="tab" :class="{active: tabIndex == 1}" @tap="changeTab(1)">商户列表</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- Service List -->
|
|
||||||
<view class="list_item" v-if="tabIndex == 0" v-for="(item, index) in serverList" :key="index">
|
|
||||||
<view class="item_tit">
|
|
||||||
<view class="item_tit_left">{{item.cate_name}}</view>
|
|
||||||
<view class="item_tit_right" @tap="ServerMore(item.cate_id)">
|
|
||||||
更多
|
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/water_filter/filter_more.png"
|
|
||||||
mode="widthFix" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="item_goodsList">
|
|
||||||
<view class="item_goodsItem" v-for="(items, subIndex) in item.appoints" :key="subIndex"
|
|
||||||
@tap="ServerDesc(items.appoint_id)">
|
|
||||||
<view class="item_goodsItem_tit">
|
|
||||||
<image :src="items.photo" mode="aspectFill" />
|
|
||||||
</view>
|
|
||||||
<view class="item_goodsItem_name">{{items.title}}</view>
|
|
||||||
<view class="item_goodsItem_msg">
|
|
||||||
¥
|
|
||||||
<view>{{items.price}}</view>
|
|
||||||
<text>/{{items.unit}}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- Merchant List -->
|
|
||||||
<view class="merchantList" v-if="tabIndex == 1">
|
|
||||||
<view class="merchantItem" v-for="(item, index) in 4" :key="index">
|
|
||||||
<view class="merchantItem_left">
|
|
||||||
<view class="merchantItem_left_img">
|
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/gropBuy/goods.png" mode="widthFix" />
|
|
||||||
</view>
|
|
||||||
<view class="merchantItem_left_msg">
|
|
||||||
<view class="merchantItem_left_msg_tit">永训医疗</view>
|
|
||||||
<view class="merchantItem_left_msg_add">衡阳市石鼓区中山北路1号</view>
|
|
||||||
<view class="merchantItem_left_msg_msg">中国领先的高科技医疗设备研...</view>
|
|
||||||
<view class="merchantItem_left_msg_tag">健康 卫生 先进</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="merchantItem_right">
|
|
||||||
电话询价
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
tabList: [{
|
|
||||||
name: "快速建档",
|
|
||||||
img: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/health_icon1.png',
|
|
||||||
url: "../express/express",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "健康自测",
|
|
||||||
img: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/health_icon2.png',
|
|
||||||
url: "../SelfTest/SelfTest",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "健康管理",
|
|
||||||
img: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/health_icon3.png',
|
|
||||||
url: "",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "上门服务",
|
|
||||||
img: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/health_icon4.png',
|
|
||||||
url: "/packages/doorToDoor/pages/doorToDoor/doorToDoor",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "自检报告",
|
|
||||||
img: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/health_icon5.png',
|
|
||||||
url: "../report/report",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "健康饮食",
|
|
||||||
img: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/health_icon6.png',
|
|
||||||
url: "../food/food",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "健康运动",
|
|
||||||
img: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/health_icon7.png',
|
|
||||||
url: "../sports/sports",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "社区商城",
|
|
||||||
img: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/health_icon8.png',
|
|
||||||
url: "",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
healthServices: [{
|
|
||||||
name: '体温',
|
|
||||||
value: '37°C',
|
|
||||||
icon: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/health_icon_1.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '血压',
|
|
||||||
value: '37mmHg',
|
|
||||||
icon: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/health_icon_2.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '血糖',
|
|
||||||
value: '37mmol/L',
|
|
||||||
icon: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/health_icon_3.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '心率',
|
|
||||||
value: '37次/分',
|
|
||||||
icon: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/health_icon_4.png'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
tabIndex: 0,
|
|
||||||
serverList:[
|
|
||||||
{
|
|
||||||
cate_name: '家政保洁',
|
|
||||||
appoints: [
|
|
||||||
{
|
|
||||||
appoint_id: 1,
|
|
||||||
photo: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/Mask_group_1.png',
|
|
||||||
title: '上门抽血',
|
|
||||||
price: 45,
|
|
||||||
unit: '次',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
appoint_id: 2,
|
|
||||||
photo: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/Mask_group_2.png',
|
|
||||||
title: '上门肌注',
|
|
||||||
price: 65,
|
|
||||||
unit: '次',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
appoint_id: 3,
|
|
||||||
photo: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/Mask_group_3.png',
|
|
||||||
title: '脐带护理',
|
|
||||||
price: 95,
|
|
||||||
unit: '次',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
cate_name: '健康养生',
|
|
||||||
appoints: [
|
|
||||||
{
|
|
||||||
appoint_id: 1,
|
|
||||||
photo: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/Mask_group_4.png',
|
|
||||||
title: '体质养生',
|
|
||||||
price: 45,
|
|
||||||
unit: '张',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
appoint_id: 2,
|
|
||||||
photo: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/Mask_group_5.png',
|
|
||||||
title: '四季养生',
|
|
||||||
price: 300,
|
|
||||||
unit: '套',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
appoint_id: 3,
|
|
||||||
photo: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/Mask_group_6.png',
|
|
||||||
title: '肝脾养生',
|
|
||||||
price: 451,
|
|
||||||
unit: '套',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
cate_name: '跑腿服务',
|
|
||||||
appoints: [
|
|
||||||
{
|
|
||||||
appoint_id: 1,
|
|
||||||
photo: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/Mask_group_7.png',
|
|
||||||
title: '同城快递',
|
|
||||||
price: 45,
|
|
||||||
unit: '件',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
appoint_id: 2,
|
|
||||||
photo: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/Mask_group_8.png',
|
|
||||||
title: '快递代取',
|
|
||||||
price: 300,
|
|
||||||
unit: '件',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
appoint_id: 3,
|
|
||||||
photo: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/Mask_group_9.png',
|
|
||||||
title: '外卖代取',
|
|
||||||
price: 451,
|
|
||||||
unit: '件',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
cate_name: '设备配套',
|
|
||||||
appoints: [
|
|
||||||
{
|
|
||||||
appoint_id: 1,
|
|
||||||
photo: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/Mask_group_10.png',
|
|
||||||
title: '血糖计',
|
|
||||||
price: 45,
|
|
||||||
unit: '个',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
appoint_id: 2,
|
|
||||||
photo: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/Mask_group_11.png',
|
|
||||||
title: '血压计',
|
|
||||||
price: 300,
|
|
||||||
unit: '个',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
appoint_id: 3,
|
|
||||||
photo: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/Mask_group_12.png',
|
|
||||||
title: '尿酸检测仪',
|
|
||||||
price: 451,
|
|
||||||
unit: '个',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],//服务列表
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
jump(url) {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: url
|
|
||||||
});
|
|
||||||
},
|
|
||||||
changeTab(index) {
|
|
||||||
this.tabIndex = index;
|
|
||||||
},
|
|
||||||
ServerMore(cateId) {
|
|
||||||
// Handle more click
|
|
||||||
console.log('More clicked for category:', cateId);
|
|
||||||
},
|
|
||||||
ServerDesc(appointId) {
|
|
||||||
// Handle service description click
|
|
||||||
console.log('Service clicked:', appointId);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onLoad() {
|
|
||||||
// Load your data here
|
|
||||||
// this.loadTabList();
|
|
||||||
// this.loadServerList();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper {
|
|
||||||
width: 710rpx;
|
|
||||||
height: 300rpx;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-top: 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper .swiper {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabList {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-top: 40rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabItem {
|
|
||||||
display: flex;
|
|
||||||
width: 25%;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-bottom: 46rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabImg {
|
|
||||||
height: 54rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabName {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #222222;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tit {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: #222222;
|
|
||||||
margin-left: 20rpx;
|
|
||||||
padding-top: 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.serviceTag {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 20rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin-top: 30rpx;
|
|
||||||
padding-bottom: 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.serviceTagItem {
|
|
||||||
width: 171rpx;
|
|
||||||
height: 212rpx;
|
|
||||||
background: linear-gradient(148deg, #FFF3EF 0%, #FFD0C0 100%);
|
|
||||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding-left: 28rpx;
|
|
||||||
padding-top: 37rpx;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.serviceTagItem_name {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.serviceTagItem_msg {
|
|
||||||
margin-top: 76rpx;
|
|
||||||
margin-left: 0rpx;
|
|
||||||
z-index: 2;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.serviceTagItem_img1 {
|
|
||||||
width: 70rpx;
|
|
||||||
height: 105rpx;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 5rpx;
|
|
||||||
right: 8rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.serviceTagItem_img2 {
|
|
||||||
width: 68.89rpx;
|
|
||||||
height: 87.54rpx;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 15rpx;
|
|
||||||
right: 6rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.serviceTagItem_img3 {
|
|
||||||
height: 79rpx;
|
|
||||||
width: 71rpx;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 18rpx;
|
|
||||||
right: 7rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.serviceTagItem_img4 {
|
|
||||||
width: 70rpx;
|
|
||||||
height: 105rpx;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 5rpx;
|
|
||||||
right: 8rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-left: 20rpx;
|
|
||||||
padding-top: 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs .tab {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #555555;
|
|
||||||
margin-right: 70rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs .active {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 32rpx;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs .active::after {
|
|
||||||
content: '';
|
|
||||||
width: 127rpx;
|
|
||||||
height: 10rpx;
|
|
||||||
background: #FF512A;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
bottom: -10rpx;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs .active::before {
|
|
||||||
width: 127rpx;
|
|
||||||
height: 10rpx;
|
|
||||||
filter: blur(6.599999904632568rpx);
|
|
||||||
background: #FF5D73;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
bottom: -10rpx;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.list {
|
|
||||||
margin-top: 36rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item_tit {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin: 0 20rpx;
|
|
||||||
margin-bottom: 32rpx;
|
|
||||||
margin-top: 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item_tit_left {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item_tit_right {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #D5AC66;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.item_tit_right image {
|
|
||||||
width: 12rpx;
|
|
||||||
height: 22rpx;
|
|
||||||
margin-left: 8rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item_goodsItem_tit {
|
|
||||||
width: 223rpx;
|
|
||||||
height: 161rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item_goodsItem_name {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #222222;
|
|
||||||
margin-top: 20rpx;
|
|
||||||
margin-left: 10rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item_goodsItem_msg {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 22rpx;
|
|
||||||
color: #FF512A;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-end;
|
|
||||||
margin-top: 6rpx;
|
|
||||||
margin-left: 13rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item_goodsItem_msg view {
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 36rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item_goodsItem_msg text {
|
|
||||||
font-size: 22rpx;
|
|
||||||
color: #FF512A;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item_goodsList {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list_item {
|
|
||||||
padding-bottom: 32rpx;
|
|
||||||
border-bottom: 1rpx solid #E6E6E6;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.merchantList {
|
|
||||||
margin: 0 20rpx;
|
|
||||||
margin-top: 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.merchantItem {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 30rpx 0;
|
|
||||||
border-bottom: 1rpx solid #E6E6E6;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.merchantItem_right {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #FFFFFF;
|
|
||||||
width: 150rpx;
|
|
||||||
height: 50rpx;
|
|
||||||
background: #D5AC66;
|
|
||||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.merchantItem_left {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.merchantItem_left_img {
|
|
||||||
width: 180rpx;
|
|
||||||
height: 180rpx;
|
|
||||||
border-radius: 20rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-right: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.merchantItem_left_msg_tit {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.merchantItem_left_msg_add {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #999999;
|
|
||||||
margin-top: 14rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.merchantItem_left_msg_msg {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 22rpx;
|
|
||||||
color: #FF512A;
|
|
||||||
background: #FFF0ED;
|
|
||||||
padding: 2rpx;
|
|
||||||
margin-top: 16rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.merchantItem_left_msg_tag {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #999999;
|
|
||||||
margin-top: 18rpx;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,203 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="selftTest">
|
|
||||||
<view class="Tit">血脂</view>
|
|
||||||
<view class="row">
|
|
||||||
<view class="row_tit">总胆固醇</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<view wx:if="Info.zdgc_status == '1'">较低</view>
|
|
||||||
<view wx:if="Info.zdgc_status == '2'">正常</view>
|
|
||||||
<view wx:if="Info.zdgc_status == '3'">较高</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="row">
|
|
||||||
<view class="row_tit">高密度脂</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<view wx:if="Info.gmdz_status == '1'">较低</view>
|
|
||||||
<view wx:if="Info.gmdz_status == '2'">正常</view>
|
|
||||||
<view wx:if="Info.gmdz_status == '3'">较高</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="row">
|
|
||||||
<view class="row_tit">甘油三脂</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<view wx:if="Info.gysz_status == '1'">较低</view>
|
|
||||||
<view wx:if="Info.gysz_status == '2'">正常</view>
|
|
||||||
<view wx:if="Info.gysz_status == '3'">较高</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="row">
|
|
||||||
<view class="row_tit">低密度脂</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<view wx:if="Info.dmyh_status == '1'">较低</view>
|
|
||||||
<view wx:if="Info.dmyh_status == '2'">正常</view>
|
|
||||||
<view wx:if="Info.dmyh_status == '3'">较高</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="row">
|
|
||||||
<view class="row_tit">冠心病指数</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<view wx:if="Info.gxbzs_status == '1'">较低</view>
|
|
||||||
<view wx:if="Info.gxbzs_status == '2'">正常</view>
|
|
||||||
<view wx:if="Info.gxbzs_status == '3'">较高</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="row none">
|
|
||||||
<view class="row_tit">动脉硬化</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<view wx:if="Info.dmyh_status == '1'">较低</view>
|
|
||||||
<view wx:if="Info.dmyh_status == '2'">正常</view>
|
|
||||||
<view wx:if="Info.dmyh_status == '3'">较高</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="gray"></view>
|
|
||||||
<view class="Tit">常规项目</view>
|
|
||||||
<view class="row type2">
|
|
||||||
<view class="row_tit">体重</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<view wx:if="Info.tz_status == '1'">较低</view>
|
|
||||||
<view wx:if="Info.tz_status == '2'">正常</view>
|
|
||||||
<view wx:if="Info.tz_status == '3'">较高</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="row type2">
|
|
||||||
<view class="row_tit">心率</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<view wx:if="Info.xl_status == '1'">较低</view>
|
|
||||||
<view wx:if="Info.xl_status == '2'">正常</view>
|
|
||||||
<view wx:if="Info.xl_status == '3'">较高</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="row none">
|
|
||||||
<view class="row_tit">体温</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<view wx:if="Info.tw_status == '1'">较低</view>
|
|
||||||
<view wx:if="Info.tw_status == '2'">正常</view>
|
|
||||||
<view wx:if="Info.tw_status == '3'">较高</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="gray"></view>
|
|
||||||
<view class="Tit">尿酸</view>
|
|
||||||
<view class="row none">
|
|
||||||
<view class="row_tit">尿酸</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<view wx:if="Info.ns_status == '1'">较低</view>
|
|
||||||
<view wx:if="Info.ns_status == '2'">正常</view>
|
|
||||||
<view wx:if="Info.ns_status == '3'">较高</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="gray"></view>
|
|
||||||
<view class="Tit">血压</view>
|
|
||||||
<view class="row">
|
|
||||||
<view class="row_tit">收缩压</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<view wx:if="Info.ssy_status == '1'">较低</view>
|
|
||||||
<view wx:if="Info.ssy_status == '2'">正常</view>
|
|
||||||
<view wx:if="Info.ssy_status == '3'">较高</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="row">
|
|
||||||
<view class="row_tit">舒张压</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<view wx:if="Info.szy_status == '1'">较低</view>
|
|
||||||
<view wx:if="Info.szy_status == '2'">正常</view>
|
|
||||||
<view wx:if="Info.szy_status == '3'">较高</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="row none">
|
|
||||||
<view class="row_tit">脉搏</view>
|
|
||||||
<view class="row_con ">
|
|
||||||
<view wx:if="Info.mb_status == '1'">较低</view>
|
|
||||||
<view wx:if="Info.mb_status == '2'">正常</view>
|
|
||||||
<view wx:if="Info.mb_status == '3'">较高</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="gray"></view>
|
|
||||||
<view class="Tit">眼科</view>
|
|
||||||
<view class="row">
|
|
||||||
<view class="row_tit">左眼视力</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<view wx:if="Info.zysl_status == '1'">较低</view>
|
|
||||||
<view wx:if="Info.zysl_status == '2'">正常</view>
|
|
||||||
<view wx:if="Info.zysl_status == '3'">较高</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="row none">
|
|
||||||
<view class="row_tit">右眼视力</view>
|
|
||||||
<view class="row_con ">
|
|
||||||
<view wx:if="Info.yysl_status == '1'">较低</view>
|
|
||||||
<view wx:if="Info.yysl_status == '2'">正常</view>
|
|
||||||
<view wx:if="Info.yysl_status == '3'">较高</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
id: "",
|
|
||||||
Info: "",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
},
|
|
||||||
onLoad(options) {
|
|
||||||
let that = this
|
|
||||||
this.id = options.id
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.selftTest {
|
|
||||||
padding: 30rpx 20rpx;
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Tit {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: #222222;
|
|
||||||
margin-bottom: 25rpx;
|
|
||||||
margin-top: 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 30rpx 0;
|
|
||||||
border-bottom: 1rpx solid #E6E6E6;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row_tit {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row_con {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #72BB4E;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row_con input {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.none {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.type2 {
|
|
||||||
color: #FF512A;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,159 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="report">
|
|
||||||
<view class="reportList">
|
|
||||||
<view class="reportItem" @click="desc" v-for="(item, index) in orderList">
|
|
||||||
<view class="reportItem_left">
|
|
||||||
<view class="reportItem_img">
|
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/port.png" mode="widthFix" />
|
|
||||||
</view>
|
|
||||||
<view class="reportItem_text">
|
|
||||||
<view class="reportItem_text_tit">{{item.title}}检查报告</view>
|
|
||||||
<view class="reportItem_text_type">检测方式:
|
|
||||||
<view>自测</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="reportItem_right">
|
|
||||||
查看
|
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/water_filter/filter_more.png"
|
|
||||||
mode="widthFix" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
t: uni.getMenuButtonBoundingClientRect().top,
|
|
||||||
h: uni.getMenuButtonBoundingClientRect().height,
|
|
||||||
orderList: [{
|
|
||||||
title: "123"
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleNavigateBack() {
|
|
||||||
uni.navigateBack();
|
|
||||||
},
|
|
||||||
desc(id) {
|
|
||||||
// 处理查看详情逻辑
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-box {
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 2;
|
|
||||||
background: #F9F9F9;
|
|
||||||
padding-bottom: 25rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-box .nav-bar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-box .nav-bar .nav-bar-left,
|
|
||||||
.nav-box .nav-bar .nav-bar-right {
|
|
||||||
padding: 0 20rpx;
|
|
||||||
width: 132rpx;
|
|
||||||
/* min-width: 36rpx; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-box .nav-bar .nav-bar-left van-icon {
|
|
||||||
vertical-align: sub;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-box .nav-bar .nav-bar-title {
|
|
||||||
flex: 1;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 36rpx;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-box .nav-bar-right {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #FF512A;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-box .nav-bar-right image {
|
|
||||||
width: 30rpx;
|
|
||||||
height: 30rpx;
|
|
||||||
margin-right: 10rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reportList {
|
|
||||||
margin: 0 20rpx;
|
|
||||||
margin-top: 15rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.reportItem {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 30rpx 0;
|
|
||||||
border-bottom: 1rpx solid #E6E6E6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reportItem_left {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reportItem_img {
|
|
||||||
width: 60rpx;
|
|
||||||
height: 60rpx;
|
|
||||||
margin-right: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reportItem_right {
|
|
||||||
display: flex;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #222222;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reportItem_right image {
|
|
||||||
width: 12rpx;
|
|
||||||
height: 26rpx;
|
|
||||||
margin-left: 13rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reportItem_text_tit {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #222222;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reportItem_text_type {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 22rpx;
|
|
||||||
color: #999999;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reportItem_text_type view {
|
|
||||||
color: #222;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,204 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="selftTest">
|
|
||||||
<view class="Tit">血脂</view>
|
|
||||||
<view class="row">
|
|
||||||
<view class="row_tit">总胆固醇</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<input type="number" v-model="zdgc" @input="ipt1" data-datas="zdgc" placeholder="0.4-4" placeholder-style="color: #999999;font-size: 26rpx;" />mg/dL
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="row">
|
|
||||||
<view class="row_tit">高密度脂</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<input type="number" v-model="gmdz" @input="ipt1" data-datas="gmdz" placeholder="2.9-6" placeholder-style="color: #999999;font-size: 26rpx;" />mmol/L
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="row">
|
|
||||||
<view class="row_tit">甘油三脂</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<input type="number" v-model="gysz" @input="ipt1" data-datas="gysz" placeholder="1.04-2.59" placeholder-style="color: #999999;font-size: 26rpx;" />mg/L
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="row">
|
|
||||||
<view class="row_tit">低密度脂</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<input type="number" v-model="dzdz" @input="ipt1" data-datas="dzdz" placeholder="0.51-1.7" placeholder-style="color: #999999;font-size: 26rpx;" />mmol/dL
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="row">
|
|
||||||
<view class="row_tit">冠心病指数</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<input type="number" v-model="gxbzs" @input="ipt1" data-datas="gxbzs" placeholder="0.3-3.35" placeholder-style="color: #999999;font-size: 26rpx;" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="row none">
|
|
||||||
<view class="row_tit">动脉硬化</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<input type="number" v-model="dmyh" @input="ipt1" data-datas="dmyh" placeholder="1.3-4.5" placeholder-style="color: #999999;font-size: 26rpx;" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="gray"></view>
|
|
||||||
<view class="Tit">常规项目</view>
|
|
||||||
<view class="row">
|
|
||||||
<view class="row_tit">体重</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<input type="number" v-model="tz" @input="ipt1" data-datas="tz" placeholder="1-200" placeholder-style="color: #999999;font-size: 26rpx;" />Kg
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="row">
|
|
||||||
<view class="row_tit">心率</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<input type="number" v-model="xl" @input="ipt1" data-datas="xl" placeholder="60-100" placeholder-style="color: #999999;font-size: 26rpx;" />次/分
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="row none">
|
|
||||||
<view class="row_tit">体温</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<input type="number" v-model="tw" @input="ipt1" data-datas="tw" placeholder="35-37.5" placeholder-style="color: #999999;font-size: 26rpx;" />℃
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="gray"></view>
|
|
||||||
<view class="Tit">尿酸</view>
|
|
||||||
<view class="row none">
|
|
||||||
<view class="row_tit">尿酸</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<input type="number" v-model="ns" @input="ipt1" data-datas="ns" placeholder="179-416" placeholder-style="color: #999999;font-size: 26rpx;" />μmol/L
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="gray"></view>
|
|
||||||
<view class="Tit">血压</view>
|
|
||||||
<view class="row">
|
|
||||||
<view class="row_tit">收缩压</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<input type="number" v-model="ssy" @input="ipt1" data-datas="ssy" placeholder="1-200" placeholder-style="color: #999999;font-size: 26rpx;" />Kg
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="row">
|
|
||||||
<view class="row_tit">舒张压</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<input type="number" v-model="szy" @input="ipt1" data-datas="szy" placeholder="60-100" placeholder-style="color: #999999;font-size: 26rpx;" />次/分
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="row none">
|
|
||||||
<view class="row_tit">脉搏</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<input type="number" v-model="mb" @input="ipt1" data-datas="mb" placeholder="60-100" placeholder-style="color: #999999;font-size: 26rpx;" />次/分
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="gray"></view>
|
|
||||||
<view class="Tit">眼科</view>
|
|
||||||
<view class="row">
|
|
||||||
<view class="row_tit">左眼视力</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<input type="number" v-model="zysl" @input="ipt1" data-datas="zysl" placeholder="1.0-4.0" placeholder-style="color: #999999;font-size: 26rpx;" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="row none">
|
|
||||||
<view class="row_tit">右眼视力</view>
|
|
||||||
<view class="row_con">
|
|
||||||
<input type="number" v-model="yysl" @input="ipt1" data-datas="yysl" placeholder="1.0-4.0" placeholder-style="color: #999999;font-size: 26rpx;" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="btn" @tap="submit">
|
|
||||||
提交
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
zdgc: '',
|
|
||||||
gmdz: '',
|
|
||||||
gysz: '',
|
|
||||||
dzdz: '',
|
|
||||||
gxbzs: '',
|
|
||||||
dmyh: '',
|
|
||||||
tz: '',
|
|
||||||
xl: '',
|
|
||||||
tw: '',
|
|
||||||
ns: '',
|
|
||||||
ssy: '',
|
|
||||||
szy: '',
|
|
||||||
mb: '',
|
|
||||||
zysl: '',
|
|
||||||
yysl: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
ipt1(e) {
|
|
||||||
const key = e.currentTarget.dataset.datas;
|
|
||||||
this[key] = e.detail.value;
|
|
||||||
},
|
|
||||||
submit() {
|
|
||||||
// 提交逻辑
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.selftTest {
|
|
||||||
padding: 30rpx 20rpx;
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Tit {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: #222222;
|
|
||||||
margin-bottom: 25rpx;
|
|
||||||
margin-top: 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 30rpx 0;
|
|
||||||
border-bottom: 1rpx solid #E6E6E6;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row_tit {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row_con {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #999999;
|
|
||||||
justify-content: flex-end;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row_con input {
|
|
||||||
text-align: right;
|
|
||||||
color: #222;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.none {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
width: 650rpx;
|
|
||||||
height: 80rpx;
|
|
||||||
background: #FF512A;
|
|
||||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 36rpx;
|
|
||||||
color: #FFFFFF;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-top: 30rpx;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -254,21 +254,21 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
// 选择位置
|
// 选择位置
|
||||||
chooseLocation() {
|
chooseLocation() {
|
||||||
uni.navigateTo({
|
// uni.navigateTo({
|
||||||
url: "/packages/areaPopup/index",
|
// url: "/packages/areaPopup/index",
|
||||||
});
|
// });
|
||||||
},
|
},
|
||||||
// 搜索服务
|
// 搜索服务
|
||||||
searchService() {
|
searchService() {
|
||||||
uni.navigateTo({
|
// uni.navigateTo({
|
||||||
url: "/packages/homeServer/search/index",
|
// url: "/packages/homeServer/search/index",
|
||||||
});
|
// });
|
||||||
},
|
},
|
||||||
// 导航到服务详情
|
// 导航到服务详情
|
||||||
navigateToService(item) {
|
navigateToService(item) {
|
||||||
uni.navigateTo({
|
// uni.navigateTo({
|
||||||
url: "/packages/homeServer/classify/index",
|
// url: "/packages/homeServer/classify/index",
|
||||||
});
|
// });
|
||||||
// uni.navigateTo({
|
// uni.navigateTo({
|
||||||
// url: `/packages/homeServer/serverInfo/index?service=${encodeURIComponent(
|
// url: `/packages/homeServer/serverInfo/index?service=${encodeURIComponent(
|
||||||
// JSON.stringify(item)
|
// JSON.stringify(item)
|
||||||
@ -280,7 +280,7 @@ export default {
|
|||||||
// uni.navigateTo({
|
// uni.navigateTo({
|
||||||
// url: `/packages/homeServer/reservation/index?id=${service.id}&name=${service.name}`,
|
// url: `/packages/homeServer/reservation/index?id=${service.id}&name=${service.name}`,
|
||||||
// });
|
// });
|
||||||
NavgateTo("/packages/homeServer/searchInfo/index");
|
// NavgateTo("/packages/homeServer/searchInfo/index");
|
||||||
},
|
},
|
||||||
// 联系客服
|
// 联系客服
|
||||||
contactService() {
|
contactService() {
|
||||||
@ -304,7 +304,7 @@ export default {
|
|||||||
|
|
||||||
// 查看公告
|
// 查看公告
|
||||||
lookNotice() {
|
lookNotice() {
|
||||||
NavgateTo("/packages/homeServer/noticeManage/index");
|
// NavgateTo("/packages/homeServer/noticeManage/index");
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
|
|||||||
@ -5,23 +5,44 @@ page {
|
|||||||
.header {
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header_tit {
|
.header_tit {
|
||||||
width: 100%;
|
flex: 1;
|
||||||
position: absolute;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .u-icon {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
padding: 20rpx;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.localBox {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #222222;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
background-color: #f6f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.localBoxItem{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.local {
|
.local {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
width: auto;
|
||||||
font-size: 26rpx;
|
white-space: nowrap;
|
||||||
color: #222222;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 20rpx;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#local {
|
#local {
|
||||||
@ -35,16 +56,16 @@ page {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.search {
|
.search {
|
||||||
background-color: #f6f7fb;
|
flex: 1;
|
||||||
padding: 20rpx 0;
|
padding: 20rpx 0;
|
||||||
|
margin-left: 15rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchBox {
|
.searchBox {
|
||||||
width: 710rpx;
|
width: 93%;
|
||||||
height: 70rpx;
|
height: 70rpx;
|
||||||
background: #FFFFFF;
|
background: #f6f7fb;
|
||||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
border-radius: 100rpx;
|
||||||
margin: 0 auto;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -176,11 +197,11 @@ page {
|
|||||||
width: 389rpx;
|
width: 389rpx;
|
||||||
height: 119rpx;
|
height: 119rpx;
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
border-radius: 100rpx;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
bottom: 200rpx;
|
bottom: 100rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -192,12 +213,11 @@ page {
|
|||||||
height: 119rpx;
|
height: 119rpx;
|
||||||
filter: blur(8.600000381469727rpx);
|
filter: blur(8.600000381469727rpx);
|
||||||
background: rgba(0, 0, 0, 0.3);
|
background: rgba(0, 0, 0, 0.3);
|
||||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
border-radius: 100rpx;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
bottom: 200rpx;
|
bottom: 100rpx;
|
||||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -4,8 +4,11 @@
|
|||||||
<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>
|
||||||
<view class="header_tit">{{ headerTitle }}</view>
|
<view class="header_tit">{{ headerTitle }}</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="localBox">
|
||||||
|
<view class="localBoxItem">
|
||||||
<view class="local">
|
<view class="local">
|
||||||
<image id="local" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_localIcon.png"
|
<image id="local"
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_localIcon.png"
|
||||||
mode="aspectFill"></image>
|
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>
|
||||||
@ -13,11 +16,14 @@
|
|||||||
|
|
||||||
<view class="search">
|
<view class="search">
|
||||||
<view class="searchBox">
|
<view class="searchBox">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
<image
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
||||||
mode="aspectFill"></image>
|
mode="aspectFill"></image>
|
||||||
<input type="text" placeholder="请输入您想搜索的内容" />
|
<input type="text" placeholder="请输入您想搜索的内容" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
<view class="merchantList" v-if="merchatList.length > 0">
|
<view class="merchantList" v-if="merchatList.length > 0">
|
||||||
<view class="merchantItem" v-for="item in merchatList" :key="item.id" @click="Info(item)">
|
<view class="merchantItem" v-for="item in merchatList" :key="item.id" @click="Info(item)">
|
||||||
<view class="merchantItem_left">
|
<view class="merchantItem_left">
|
||||||
@ -69,11 +75,11 @@
|
|||||||
|
|
||||||
|
|
||||||
<view class="btnList">
|
<view class="btnList">
|
||||||
<view class="btn_left">
|
<!-- <view class="btn_left">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_serverIcon.png"
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_serverIcon.png"
|
||||||
mode="aspectFill"></image>
|
mode="aspectFill"></image>
|
||||||
到店服务券
|
到店服务券
|
||||||
</view>
|
</view> -->
|
||||||
<view class="line"></view>
|
<view class="line"></view>
|
||||||
<view class="btn_right">
|
<view class="btn_right">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/lcoal_payIcon.png"
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/lcoal_payIcon.png"
|
||||||
|
|||||||
@ -157,6 +157,7 @@ export default {
|
|||||||
},
|
},
|
||||||
//获取评论列表
|
//获取评论列表
|
||||||
getCommentList() {
|
getCommentList() {
|
||||||
|
if (uni.getStorageSync('userId')) {
|
||||||
request(apiArr.getMerchantComment, "POST", {
|
request(apiArr.getMerchantComment, "POST", {
|
||||||
page_num: this.page_num,
|
page_num: this.page_num,
|
||||||
page_size: this.page_size,
|
page_size: this.page_size,
|
||||||
@ -174,13 +175,14 @@ export default {
|
|||||||
});
|
});
|
||||||
|
|
||||||
list.forEach(item => {
|
list.forEach(item => {
|
||||||
item.merchant_evaluation_reply_list =item.merchant_evaluation_reply_list.filter((item) => {
|
item.merchant_evaluation_reply_list = item.merchant_evaluation_reply_list.filter((item) => {
|
||||||
return item.status == 2;
|
return item.status == 2;
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
this.commentList = this.commentList.concat(list);
|
this.commentList = this.commentList.concat(list);
|
||||||
})
|
})
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
getMerchantInfo() {
|
getMerchantInfo() {
|
||||||
|
|||||||
@ -3,18 +3,30 @@ page {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
/* padding-top: 100rpx; */
|
padding-bottom: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.localBox {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #222222;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
background-color: #f6f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.localBoxItem{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.local {
|
.local {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
width: auto;
|
||||||
font-size: 26rpx;
|
white-space: nowrap;
|
||||||
color: #222222;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 20rpx;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#local {
|
#local {
|
||||||
@ -28,16 +40,16 @@ page {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.search {
|
.search {
|
||||||
background-color: #f6f7fb;
|
flex: 1;
|
||||||
padding: 20rpx 0;
|
padding: 20rpx 0;
|
||||||
|
margin-left: 15rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchBox {
|
.searchBox {
|
||||||
width: 710rpx;
|
width: 93%;
|
||||||
height: 70rpx;
|
height: 70rpx;
|
||||||
background: #FFFFFF;
|
background: #f6f7fb;
|
||||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
border-radius: 100rpx;
|
||||||
margin: 0 auto;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -169,11 +181,11 @@ page {
|
|||||||
width: 389rpx;
|
width: 389rpx;
|
||||||
height: 119rpx;
|
height: 119rpx;
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
border-radius: 100rpx;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
bottom: 200rpx;
|
bottom: 100rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -185,13 +197,11 @@ page {
|
|||||||
height: 119rpx;
|
height: 119rpx;
|
||||||
filter: blur(8.600000381469727rpx);
|
filter: blur(8.600000381469727rpx);
|
||||||
background: rgba(0, 0, 0, 0.3);
|
background: rgba(0, 0, 0, 0.3);
|
||||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
border-radius: 100rpx;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
bottom: 200rpx;
|
bottom: 100rpx;
|
||||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -235,7 +245,7 @@ page {
|
|||||||
|
|
||||||
.lines {
|
.lines {
|
||||||
background-color: #f5f7f9;
|
background-color: #f5f7f9;
|
||||||
height: 40rpx;
|
height: 20rpx;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,7 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
|
<view class="localBox">
|
||||||
|
<view class="localBoxItem">
|
||||||
<view class="local">
|
<view class="local">
|
||||||
<image id="local" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_localIcon.png"
|
<image id="local"
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_localIcon.png"
|
||||||
mode="aspectFill"></image>
|
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>
|
||||||
@ -9,11 +12,14 @@
|
|||||||
|
|
||||||
<view class="search">
|
<view class="search">
|
||||||
<view class="searchBox">
|
<view class="searchBox">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
<image
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
||||||
mode="aspectFill"></image>
|
mode="aspectFill"></image>
|
||||||
<input type="text" placeholder="请输入您想搜索的内容" />
|
<input type="text" placeholder="请输入您想搜索的内容" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<view class="swiperBox">
|
<view class="swiperBox">
|
||||||
<swiper class="swiper" @change="swiperChange" :current="currentIndex">
|
<swiper class="swiper" @change="swiperChange" :current="currentIndex">
|
||||||
@ -91,11 +97,11 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="btnList">
|
<view class="btnList">
|
||||||
<view class="btn_left">
|
<!-- <view class="btn_left">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_serverIcon.png"
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_serverIcon.png"
|
||||||
mode="aspectFill"></image>
|
mode="aspectFill"></image>
|
||||||
到店服务券
|
到店服务券
|
||||||
</view>
|
</view> -->
|
||||||
<view class="line"></view>
|
<view class="line"></view>
|
||||||
<view class="btn_right">
|
<view class="btn_right">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/lcoal_payIcon.png"
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/lcoal_payIcon.png"
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<view class="container">
|
||||||
<div class="header" :style="{ paddingTop: top + 'px', height: localHeight + 'px' }">
|
<view class="header" :style="{ paddingTop: top + 'px', height: localHeight + 'px' }">
|
||||||
<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>
|
</view>
|
||||||
|
|
||||||
<swiper class="swiper" autoplay>
|
<swiper class="swiper" autoplay>
|
||||||
<swiper-item v-for="(item, pageIndex) in info.bigImg" :key="pageIndex">
|
<swiper-item v-for="(item, pageIndex) in info.bigImg" :key="pageIndex">
|
||||||
@ -10,76 +10,77 @@
|
|||||||
</swiper-item>
|
</swiper-item>
|
||||||
</swiper>
|
</swiper>
|
||||||
|
|
||||||
<div class="swiper_boxshadow"></div>
|
<view class="swiper_boxshadow"></view>
|
||||||
|
|
||||||
<div class="Tit">
|
<view class="Tit">
|
||||||
向 <span>{{ info.merchant_name }}</span> 付款
|
向 <span>{{ info.merchant_name }}</span> 付款
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="Msg">
|
<view class="Msg">
|
||||||
<div class="payMony">
|
<view class="payMony">
|
||||||
¥<input type="number" v-model="Money" placeholder="付款金额" placeholder-style="font-size: 50rpx;"
|
¥<input type="number" v-model="Money" placeholder="付款金额" placeholder-style="font-size: 50rpx;" @blur="handleMoneyInput" @focus="showKeyboard" step="0.01" min="0.01">
|
||||||
@blur="handleMoneyInput" step="0.01" min="0.01"> </div>
|
<cu-keyboard ref="cukeyboard" @change="change" @confirm="keyboardConfirm" @hide="hide"></cu-keyboard>
|
||||||
<div class="payRemark">
|
</view>
|
||||||
|
<view class="payRemark">
|
||||||
<input type="text" v-model="remarks" placeholder="付款备注">
|
<input type="text" v-model="remarks" placeholder="付款备注">
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="Msg2">
|
<view class="Msg2">
|
||||||
<div class="Msg2_tit">
|
<view class="Msg2_tit">
|
||||||
<div class="Msg2_tit_left">获得物业公积金</div>
|
<view class="Msg2_tit_left">获得物业公积金</view>
|
||||||
<div class="Msg2_tit_right" @click="choseComminty">
|
<!-- <view class="Msg2_tit_right" @click="choseComminty">
|
||||||
绑定房源
|
绑定房源
|
||||||
<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
|
<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
|
||||||
</div>
|
</view> -->
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="Msg2_con">
|
<view class="Msg2_con">
|
||||||
<div class="Msg2_con_left">
|
<view class="Msg2_con_left">
|
||||||
¥ <span>
|
¥ <span>
|
||||||
{{ homeMoney }}
|
{{ homeMoney }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</view>
|
||||||
<div class="Msg2_con_right">
|
<!-- <view class="Msg2_con_right">
|
||||||
{{ room_name }}
|
{{ room_name }}
|
||||||
</div>
|
</view> -->
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="Msg3">
|
<view class="Msg3">
|
||||||
<div class="Msg3_tit">获得积分</div>
|
<view class="Msg3_tit">获得积分</view>
|
||||||
<div class="Msg3_con">
|
<view class="Msg3_con">
|
||||||
{{ integral }}
|
{{ integral }}
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="btn" @click="pay">确认支付</div>
|
<view class="btn" @click="pay">确认支付</view>
|
||||||
|
|
||||||
<div class="btnList">
|
<view class="btnList">
|
||||||
<div class="btnItem" @click="payList">付款记录</div>
|
<view class="btnItem" @click="payList">付款记录</view>
|
||||||
<div class="line"></div>
|
<view class="line"></view>
|
||||||
<div class="btnItem" @click="homeMoneList">物业费公积金</div>
|
<view class="btnItem" @click="homeMoneList">物业费公积金</view>
|
||||||
<div class="line"></div>
|
<view class="line"></view>
|
||||||
<div class="btnItem" @click="home">首页</div>
|
<view class="btnItem" @click="home">首页</view>
|
||||||
<div class="btnItem2" @click="changeBoxshadow">
|
<view class="btnItem2" @click="changeBoxshadow">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_qrcode.png"
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_qrcode.png"
|
||||||
mode="aspectFill"></image>
|
mode="aspectFill"></image>
|
||||||
本页二维码
|
本页二维码
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
|
|
||||||
<u-picker :show="show" :columns="[commintyList]" keyName="label" @confirm='confirm' @close='onClose'
|
<u-picker :show="show" :columns="[commintyList]" keyName="label" @confirm='confirm' @close='onClose'
|
||||||
@cancel='onClose' closeOnClickOverlay></u-picker>
|
@cancel='onClose' closeOnClickOverlay></u-picker>
|
||||||
|
|
||||||
<div class="boxshadow" @click="changeBoxshadow2" v-if="boxShow">
|
<view class="boxshadow" @click="changeBoxshadow2" v-if="boxShow">
|
||||||
<div class="boxshadow_con">
|
<view class="boxshadow_con">
|
||||||
<image :src="myCode" mode="aspectFill"></image>
|
<image :src="myCode" mode="aspectFill"></image>
|
||||||
|
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
</div>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -136,6 +137,48 @@ export default {
|
|||||||
|
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
showKeyboard() {
|
||||||
|
this.$refs.cukeyboard.open();
|
||||||
|
},
|
||||||
|
// 键盘输入内容变化时触发
|
||||||
|
change(value) {
|
||||||
|
// 先进行基本的输入格式化
|
||||||
|
let formattedValue = value.toString().replace(/[^\d.]/g, '');
|
||||||
|
|
||||||
|
// 如果第一个数字是0且后面还有其他数字,则删除这个0
|
||||||
|
if (formattedValue.length >= 2 && formattedValue[0] === '0' && formattedValue[1] !== '.') {
|
||||||
|
formattedValue = formattedValue.substring(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 限制只能有一个小数点
|
||||||
|
formattedValue = formattedValue.replace(/\.{2,}/g, '.');
|
||||||
|
|
||||||
|
// 确保小数点后最多两位
|
||||||
|
const parts = formattedValue.split('.');
|
||||||
|
if (parts.length > 1) {
|
||||||
|
formattedValue = parts[0] + '.' + parts[1].substring(0, 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理开头是小数点的情况
|
||||||
|
if (formattedValue.startsWith('.')) {
|
||||||
|
formattedValue = '0' + formattedValue;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.Money = formattedValue;
|
||||||
|
},
|
||||||
|
// 点击键盘确认按钮时触发
|
||||||
|
keyboardConfirm(value) {
|
||||||
|
// 如果最后一位是小数点,则删除小数点
|
||||||
|
if (value && value.endsWith('.')) {
|
||||||
|
value = value.slice(0, -1);
|
||||||
|
}
|
||||||
|
this.Money = value;
|
||||||
|
this.$refs.cukeyboard.close();
|
||||||
|
},
|
||||||
|
// 键盘隐藏时触发
|
||||||
|
hide() {
|
||||||
|
// 可以在这里添加键盘隐藏后的处理逻辑
|
||||||
|
},
|
||||||
handleMoneyInput() {
|
handleMoneyInput() {
|
||||||
// 清除非数字和非小数点的字符
|
// 清除非数字和非小数点的字符
|
||||||
let value = this.Money.toString().replace(/[^\d.]/g, '');
|
let value = this.Money.toString().replace(/[^\d.]/g, '');
|
||||||
@ -169,8 +212,8 @@ export default {
|
|||||||
url: 'https://api.weixin.qq.com/cgi-bin/token',
|
url: 'https://api.weixin.qq.com/cgi-bin/token',
|
||||||
data: {
|
data: {
|
||||||
grant_type: 'client_credential',
|
grant_type: 'client_credential',
|
||||||
appid: "wxb4018c78fa143450",
|
appid: "wx1addb25675dd8e70",
|
||||||
secret: "82a3471a28fcbfe27d8eb4397b60069b"
|
secret: "1c153a91d0558b4c3834a4399ebc7496"
|
||||||
},
|
},
|
||||||
header: {
|
header: {
|
||||||
// 'custom-header': 'hello' //自定义请求头信息
|
// 'custom-header': 'hello' //自定义请求头信息
|
||||||
|
|||||||
@ -1,54 +1,55 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<view class="container">
|
||||||
<div class="payInfoList">
|
<view class="payInfoList">
|
||||||
<div class="PayInfoItem" v-for="item in payList">
|
<view class="PayInfoItem" v-for="item in payList">
|
||||||
<div class="row">
|
<view class="row">
|
||||||
<div class="row_label">付款金额</div>
|
<view class="row_label">付款金额</view>
|
||||||
<div class="row_con">¥{{ item.order_amount }}</div>
|
<view class="row_con">¥{{ item.order_amount }}</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="row">
|
<view class="row">
|
||||||
<div class="row_label2">{{item.create_time}}</div>
|
<view class="row_label2">{{item.create_time}}</view>
|
||||||
<div class="row_label2" v-if="false">Adapay微信小程序支付</div>
|
<view class="row_label2" v-if="false">Adapay微信小程序支付</view>
|
||||||
<div class="row_label2">{{item.payment_method}}</div>
|
<view class="row_label2">{{item.payment_method}}</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="line"></div>
|
<view class="line"></view>
|
||||||
|
|
||||||
<div class="row2">
|
<view class="row2">
|
||||||
<div class="label">订单号</div>
|
<view class="label">订单号</view>
|
||||||
<div class="con3">{{item.order_no}}</div>
|
<view class="con3">{{item.order_no}}</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="row2">
|
<view class="row2">
|
||||||
<div class="label">消费门店</div>
|
<view class="label">消费门店</view>
|
||||||
<div class="con3">{{item.merchant_info.merchant_name}}</div>
|
<view class="con3">{{item.merchant_info.merchant_name}}</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="row2">
|
<view class="row2">
|
||||||
<div class="label">当前状态</div>
|
<view class="label">当前状态</view>
|
||||||
<div class="con3" v-if="item.status == 1">已支付</div>
|
<view class="con3" v-if="item.status == 1">待支付</view>
|
||||||
<div class="con3" v-if="item.status == 2">待支付</div>
|
<view class="con3" v-else-if="item.status == 2">已支付</view>
|
||||||
<div class="con3" v-if="item.status == 3">已退款</div>
|
<view class="con3" v-else-if="item.status == 5">已退款</view>
|
||||||
</div>
|
<view class="con3" v-else>未知</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<div class="line"></div>
|
<view class="line"></view>
|
||||||
|
|
||||||
<div class="row3">
|
<view class="row3">
|
||||||
<div class="label">返物业费</div>
|
<view class="label">返物业费</view>
|
||||||
<div class="con3" @click="houseProvident">¥{{item.refund_property_fee}}
|
<view class="con3" @click="houseProvident">¥{{item.refund_property_fee}}
|
||||||
<u-icon name="arrow-right" color="#999999" size="40" style="max-lines: 10rpx;"></u-icon>
|
<u-icon name="arrow-right" color="#999999" size="40" style="max-lines: 10rpx;"></u-icon>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="line"></div>
|
<view class="line"></view>
|
||||||
<div class="row">
|
<view class="row">
|
||||||
<div class="label">返会员积分</div>
|
<view class="label">返会员积分</view>
|
||||||
<div class="con3" @click="points">{{ item.refund_member_points }}
|
<view class="con3" @click="points">{{ item.refund_member_points }}
|
||||||
<u-icon name="arrow-right" color="#999999" size="40" style="max-lines: 10rpx;"></u-icon>
|
<u-icon name="arrow-right" color="#999999" size="40" style="max-lines: 10rpx;"></u-icon>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@ -1,190 +0,0 @@
|
|||||||
[
|
|
||||||
{
|
|
||||||
"id": 9001,
|
|
||||||
"after_sales_no": "AS202508130001",
|
|
||||||
"commodity_order_id": 1001,
|
|
||||||
"after_sales_status": 1,
|
|
||||||
"applicant": "张三",
|
|
||||||
"after_sales_reason": "拍错商品/不想要了",
|
|
||||||
"after_sales_type": 1,
|
|
||||||
"application_description": "请尽快处理退款",
|
|
||||||
"application_images": "http://localhost:8080/test.png",
|
|
||||||
"is_need_process": 1,
|
|
||||||
"process_status": 1,
|
|
||||||
"refund_amount": 68.00,
|
|
||||||
"after_sales_goods": "1@8001",
|
|
||||||
"refund_method": 1,
|
|
||||||
"review_status": 1,
|
|
||||||
"creator": "customer",
|
|
||||||
"create_time": "2025-08-13T11:20:00Z",
|
|
||||||
"commodity_order_item": [
|
|
||||||
{
|
|
||||||
"id": 7001,
|
|
||||||
"goods_id": 8001,
|
|
||||||
"goods_name": "澳洲牛排",
|
|
||||||
"is_support_same_day": 1,
|
|
||||||
"commodity_pic": "http://localhost:8080/test.png",
|
|
||||||
"sales_price": 68.00,
|
|
||||||
"count": 1,
|
|
||||||
"after_sales_status": 1
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 9002,
|
|
||||||
"after_sales_no": "AS202508130002",
|
|
||||||
"commodity_order_id": 1002,
|
|
||||||
"after_sales_status": 1,
|
|
||||||
"after_sales_type": 1,
|
|
||||||
"refund_no": "RF202508130001",
|
|
||||||
"refund_completed_time": "2025-08-13T14:30:00Z",
|
|
||||||
"is_need_process": 2,
|
|
||||||
"process_status": 2,
|
|
||||||
"refund_amount": 45.80,
|
|
||||||
"after_sales_goods": "2@8004",
|
|
||||||
"refund_method": 1,
|
|
||||||
"review_status": 2,
|
|
||||||
"review_remark": "审核通过,已原路退款",
|
|
||||||
"reviewer": "客服008",
|
|
||||||
"review_time": "2025-08-13T14:15:00Z",
|
|
||||||
"create_time": "2025-08-13T13:45:00Z",
|
|
||||||
"commodity_order_item": [
|
|
||||||
{
|
|
||||||
"id": 7004,
|
|
||||||
"goods_id": 8004,
|
|
||||||
"goods_name": "东北大米",
|
|
||||||
"sales_price": 22.90,
|
|
||||||
"count": 2,
|
|
||||||
"after_sales_status": 3
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 9003,
|
|
||||||
"after_sales_no": "AS202508130003",
|
|
||||||
"commodity_order_id": 1003,
|
|
||||||
"after_sales_status": 1,
|
|
||||||
"applicant": "李四",
|
|
||||||
"after_sales_reason": "商品质量问题",
|
|
||||||
"after_sales_type": 2,
|
|
||||||
"application_description": "商品包装破损",
|
|
||||||
"application_images": "http://localhost:8080/test.png",
|
|
||||||
"return_description": "已通过顺丰寄回",
|
|
||||||
"return_images": "http://localhost:8080/test.png",
|
|
||||||
"return_tracking_no": "SF1234567890",
|
|
||||||
"return_logistics_company": "顺丰速运",
|
|
||||||
"return_contact_phone": "13800138000",
|
|
||||||
"is_need_process": 1,
|
|
||||||
"process_status": 1,
|
|
||||||
"refund_amount": 152.00,
|
|
||||||
"after_sales_goods": "1@8003",
|
|
||||||
"refund_method": 1,
|
|
||||||
"review_status": 1,
|
|
||||||
"create_time": "2025-08-13T15:30:00Z",
|
|
||||||
"commodity_order_item": [
|
|
||||||
{
|
|
||||||
"id": 7003,
|
|
||||||
"goods_id": 8003,
|
|
||||||
"goods_name": "精品榴莲",
|
|
||||||
"sales_price": 152.00,
|
|
||||||
"count": 1,
|
|
||||||
"after_sales_status": 1
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 9004,
|
|
||||||
"after_sales_no": "AS202508130004",
|
|
||||||
"after_sales_type": 2,
|
|
||||||
"after_sales_status": 1,
|
|
||||||
"process_status": 2,
|
|
||||||
"refund_amount": 39.90,
|
|
||||||
"review_status": 2,
|
|
||||||
"review_remark": "商品已验货,符合退款条件",
|
|
||||||
"reviewer": "质检005",
|
|
||||||
"review_time": "2025-08-13T16:45:00Z",
|
|
||||||
"refund_no": "RF202508130002",
|
|
||||||
"refund_completed_time": "2025-08-13T17:30:00Z",
|
|
||||||
"create_time": "2025-08-13T09:30:00Z",
|
|
||||||
"commodity_order_item": [
|
|
||||||
{
|
|
||||||
"id": 7005,
|
|
||||||
"goods_name": "酸奶套装",
|
|
||||||
"sales_price": 39.90,
|
|
||||||
"count": 1,
|
|
||||||
"after_sales_status": 2
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 9005,
|
|
||||||
"after_sales_no": "AS202508130005",
|
|
||||||
"commodity_order_id": 1004,
|
|
||||||
"after_sales_type": 3,
|
|
||||||
"after_sales_status": 1,
|
|
||||||
"applicant": "王五",
|
|
||||||
"after_sales_reason": "商品发错型号",
|
|
||||||
"application_description": "购买的是XL码,收到L码",
|
|
||||||
"application_images": "http://localhost:8080/test.png",
|
|
||||||
"is_need_process": 1,
|
|
||||||
"process_status": 1,
|
|
||||||
"after_sales_goods": "1@8006",
|
|
||||||
"receiving_address": "上海市浦东新区张江高科88号",
|
|
||||||
"review_status": 1,
|
|
||||||
"create_time": "2025-08-13T10:15:00Z",
|
|
||||||
"commodity_order_item": [
|
|
||||||
{
|
|
||||||
"id": 7006,
|
|
||||||
"goods_id": 8006,
|
|
||||||
"goods_name": "冷冻虾仁",
|
|
||||||
"sales_price": 76.50,
|
|
||||||
"count": 1,
|
|
||||||
"after_sales_status": 1
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 9006,
|
|
||||||
"after_sales_no": "AS202508130006",
|
|
||||||
"after_sales_type": 3,
|
|
||||||
"after_sales_status": 1,
|
|
||||||
"process_status": 2,
|
|
||||||
"processor": "客服012",
|
|
||||||
"process_time": "2025-08-13T14:20:00Z",
|
|
||||||
"process_remark": "已补发新商品,物流单号:YT987654321",
|
|
||||||
"review_status": 2,
|
|
||||||
"reviewer": "客服主管",
|
|
||||||
"review_time": "2025-08-13T13:40:00Z",
|
|
||||||
"create_time": "2025-08-13T09:00:00Z",
|
|
||||||
"commodity_order_item": [
|
|
||||||
{
|
|
||||||
"id": 7007,
|
|
||||||
"goods_id": 8007,
|
|
||||||
"goods_name": "进口橙子",
|
|
||||||
"sales_price": 32.00,
|
|
||||||
"count": 2,
|
|
||||||
"after_sales_status": 2
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 9007,
|
|
||||||
"after_sales_no": "AS202508130007",
|
|
||||||
"after_sales_status": 2,
|
|
||||||
"revoke_time": "2025-08-13T11:05:00Z",
|
|
||||||
"after_sales_type": 1,
|
|
||||||
"applicant": "赵六",
|
|
||||||
"after_sales_reason": "商品运输损坏",
|
|
||||||
"create_time": "2025-08-13T10:30:00Z",
|
|
||||||
"update_time": "2025-08-13T11:05:00Z",
|
|
||||||
"commodity_order_item": [
|
|
||||||
{
|
|
||||||
"id": 7002,
|
|
||||||
"goods_name": "有机西兰花",
|
|
||||||
"sales_price": 10.50,
|
|
||||||
"count": 1,
|
|
||||||
"after_sales_status": 4
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
@ -41,6 +41,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.company-name {
|
.company-name {
|
||||||
|
width: 550rpx;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
@ -93,8 +94,7 @@
|
|||||||
|
|
||||||
.goods-desc {
|
.goods-desc {
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
color: #ff4d4f;
|
color: #999999;
|
||||||
background-color: #fff2f0;
|
|
||||||
padding: 4rpx 12rpx;
|
padding: 4rpx 12rpx;
|
||||||
border-radius: 8rpx;
|
border-radius: 8rpx;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|||||||
@ -5,9 +5,9 @@
|
|||||||
<!-- 头部信息 -->
|
<!-- 头部信息 -->
|
||||||
<view class="header">
|
<view class="header">
|
||||||
<view class="company-info">
|
<view class="company-info">
|
||||||
<text class="company-name">{{ item.commodity_order_item[0].goods_name || '衡水喜屏传媒有限公司'
|
<view class="company-name">{{ item.commodity_order_item[0].goods_name }}</view>
|
||||||
}}</text>
|
<text class="after-sale-no">{{ item.after_sales_type === 1 ? '退款' : (item.after_sales_type === 2
|
||||||
<text class="after-sale-no">退货退款</text>
|
? '退货退款' : '换货') }}</text>
|
||||||
</view>
|
</view>
|
||||||
<text class="order-time">提交订单:{{ formatDate(item.create_time) }}</text>
|
<text class="order-time">提交订单:{{ formatDate(item.create_time) }}</text>
|
||||||
</view>
|
</view>
|
||||||
@ -22,7 +22,7 @@
|
|||||||
{{ ite.goods_name }}
|
{{ ite.goods_name }}
|
||||||
<text class="refund-amount">退款:¥{{ ite.sales_price }}</text>
|
<text class="refund-amount">退款:¥{{ ite.sales_price }}</text>
|
||||||
</text>
|
</text>
|
||||||
<text class="goods-desc">{{ ite.after_sales_reason }}</text>
|
<text class="goods-desc">{{ ite.goods_spec }}</text>
|
||||||
<view class="price-count">
|
<view class="price-count">
|
||||||
<text class="goods-price">¥{{ ite.sales_price }}/个</text>
|
<text class="goods-price">¥{{ ite.sales_price }}/个</text>
|
||||||
<text class="goods-count">x{{ ite.count }}</text>
|
<text class="goods-count">x{{ ite.count }}</text>
|
||||||
@ -31,9 +31,9 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 退款状态 -->
|
<!-- 退款状态 -->
|
||||||
<view class="status-container">
|
<view class="status-container" v-if="showStatus">
|
||||||
<view class="status-item" @click="pendingPage(item)">
|
<view class="status-item" @click="pendingPage(item)">
|
||||||
<text class="status-label">{{ getStatusText(item.after_sales_status) }}</text>
|
<text class="status-label">{{ getStatusText(item) }}</text>
|
||||||
<text class="status-desc">商家将在<text style="color: #e73b05;">{{
|
<text class="status-desc">商家将在<text style="color: #e73b05;">{{
|
||||||
calculateProcessingTime(item.create_time) }}</text>内处理</text>
|
calculateProcessingTime(item.create_time) }}</text>内处理</text>
|
||||||
<view class="arrow-right"></view>
|
<view class="arrow-right"></view>
|
||||||
@ -41,9 +41,9 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 操作按钮 -->
|
<!-- 操作按钮 -->
|
||||||
<view class="action-buttons">
|
<view class="action-buttons" v-if="showStatus">
|
||||||
<button class="modify-btn" @click="modifyApplication">修改申请</button>
|
<button class="modify-btn" @click="modifyApplication(item)">修改申请</button>
|
||||||
<button class="cancel-btn" @click="cancelApplication">撤销申请</button>
|
<button class="cancel-btn" @click="cancelApplication(item)">撤销申请</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -52,7 +52,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import afterSaleData from './afterSale.json';
|
import { apiArr } from "../../../api/afterSale";
|
||||||
import {
|
import {
|
||||||
isPhone,
|
isPhone,
|
||||||
picUrl,
|
picUrl,
|
||||||
@ -62,22 +62,60 @@ import {
|
|||||||
} from '../../../utils';
|
} from '../../../utils';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
props: {
|
||||||
|
afterSaleList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
order_cate: {
|
||||||
|
type: Number,
|
||||||
|
default: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
currentAfterSale: afterSaleData
|
currentAfterSale: this.afterSaleList,
|
||||||
|
showStatus: true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
onLoad() {
|
watch: {
|
||||||
|
afterSaleList: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.currentAfterSale = newVal;
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getStatusText(status) {
|
getList() {
|
||||||
// 根据状态码返回对应的状态文本
|
const params = {
|
||||||
|
user_id: uni.getStorageSync('userId'),
|
||||||
|
order_cate: this.order_cate,
|
||||||
|
}
|
||||||
|
request(apiArr.afterSalesList, "POST", params).then((res) => {
|
||||||
|
res.after_sales_list.forEach(item => {
|
||||||
|
item.commodity_order_item?.forEach(good => {
|
||||||
|
good.commodity_pic = picUrl + good.commodity_pic;
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.currentAfterSale = res.after_sales_list;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getStatusText(item) {
|
||||||
|
if (item.after_sales_status === 2) {
|
||||||
|
return '已撤销';
|
||||||
|
}
|
||||||
|
if (item.process_status === 2) {
|
||||||
|
this.showStatus = false;
|
||||||
|
return '已完成';
|
||||||
|
} else if (item.process_status === 3) {
|
||||||
|
return '已取消';
|
||||||
|
}
|
||||||
|
const status = item.review_status;
|
||||||
const statusMap = {
|
const statusMap = {
|
||||||
1: '商家待处理',
|
1: '商家待处理',
|
||||||
2: '已撤销',
|
2: '商家已同意',
|
||||||
3: '已完成',
|
3: '商家已拒绝',
|
||||||
4: '已拒绝'
|
|
||||||
};
|
};
|
||||||
return statusMap[status] || '未知状态';
|
return statusMap[status] || '未知状态';
|
||||||
},
|
},
|
||||||
@ -95,29 +133,51 @@ export default {
|
|||||||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||||
},
|
},
|
||||||
modifyApplication() {
|
modifyApplication(item) {
|
||||||
console.log('修改申请');
|
NavgateTo(`../apply/index?item=${JSON.stringify(item)}`);
|
||||||
},
|
},
|
||||||
cancelApplication() {
|
cancelApplication(item) {
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
title: '提示',
|
title: '提示',
|
||||||
content: '确定要撤销退款申请吗?',
|
content: '确定要撤销退款申请吗?',
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
if (res.confirm) {
|
if (res.confirm) {
|
||||||
console.log('撤销申请');
|
const params = {
|
||||||
uni.navigateBack();
|
id: item.id,
|
||||||
|
}
|
||||||
|
request(apiArr.revokeApply, "POST", params).then((res) => {
|
||||||
|
this.getList();
|
||||||
|
uni.showToast({
|
||||||
|
title: '订单撤销成功',
|
||||||
|
icon: 'success',
|
||||||
|
// duration: 1500,
|
||||||
|
// success: () => {
|
||||||
|
// this.$emit('revokeApply');
|
||||||
|
// }
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
pendingPage(item) {
|
pendingPage(item) {
|
||||||
NavgateTo(`/packages/myOrders/pending/index?item=${JSON.stringify(item)}`); //拒绝申请
|
// NavgateTo(`/packages/myOrders/sendBack/index?item=${JSON.stringify(item)}`);
|
||||||
// NavgateTo(`/packages/myOrders/sendBack/index?item=${JSON.stringify(item)}`); //自行寄回
|
|
||||||
// NavgateTo(`/packages/myOrders/refundOver/index?item=${JSON.stringify(item)}`); //退款成功
|
|
||||||
// NavgateTo(`/packages/myOrders/changeInfo/index?item=${JSON.stringify(item)}`); //换货
|
|
||||||
}
|
|
||||||
|
|
||||||
|
if (item.after_sales_type === 3) {
|
||||||
|
if (item.review_status === 2) {
|
||||||
|
NavgateTo(`/packages/myOrders/sendBack/index?item=${JSON.stringify(item)}`); //自行寄回
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
NavgateTo(`/packages/myOrders/changeInfo/index?item=${JSON.stringify(item)}`)
|
||||||
|
} else {
|
||||||
|
if (item.refund_completed_time) {
|
||||||
|
NavgateTo(`/packages/myOrders/refundOver/index?item=${JSON.stringify(item)}`); //退款成功
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
NavgateTo(`/packages/myOrders/pending/index?item=${JSON.stringify(item)}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -72,7 +72,7 @@
|
|||||||
退货退款</view>
|
退货退款</view>
|
||||||
<view :class="['asTab2', selectedAfterSaleType2 === 1 ? 'active' : '']"
|
<view :class="['asTab2', selectedAfterSaleType2 === 1 ? 'active' : '']"
|
||||||
@click="selectAfterSaleType2(1)">
|
@click="selectAfterSaleType2(1)">
|
||||||
退货
|
退款
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="reason-list" v-if="selectedAfterSaleType2 === 0">
|
<view class="reason-list" v-if="selectedAfterSaleType2 === 0">
|
||||||
@ -103,14 +103,15 @@ import {
|
|||||||
upload,
|
upload,
|
||||||
NavgateTo
|
NavgateTo
|
||||||
} from '../../../utils';
|
} from '../../../utils';
|
||||||
|
import { apiArr } from "../../../api/afterSale";
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
currentAfterSale: null,
|
currentAfterSale: null,
|
||||||
afterSalePopup2: false,
|
afterSalePopup2: false,
|
||||||
afterSalePopup3: false,
|
selectedAfterSaleType2: 0, // 0:退货/退款, 1:退款
|
||||||
selectedAfterSaleType2: 0, // 0:退货/退款, 1:退货
|
|
||||||
selectedAsReason: 0,
|
selectedAsReason: 0,
|
||||||
selectedServiceType: '',
|
selectedServiceType: '',
|
||||||
selectedRefundReason: '',
|
selectedRefundReason: '',
|
||||||
@ -119,9 +120,10 @@ export default {
|
|||||||
postage: 0,
|
postage: 0,
|
||||||
refundDescription: '',
|
refundDescription: '',
|
||||||
refundMethod: '自行寄回',
|
refundMethod: '自行寄回',
|
||||||
merchantAddress: '衡水市路北街道中心北大街世纪名城41号楼',
|
merchantAddress: '',
|
||||||
merchantContact: '高尚 18032753127',
|
merchantContact: '',
|
||||||
imgList: [],
|
imgList: [],
|
||||||
|
afterSalesType: 2,
|
||||||
applyRefundReasons: [
|
applyRefundReasons: [
|
||||||
'商品质量问题',
|
'商品质量问题',
|
||||||
'商品与描述不符',
|
'商品与描述不符',
|
||||||
@ -143,8 +145,10 @@ export default {
|
|||||||
this.currentAfterSale = item;
|
this.currentAfterSale = item;
|
||||||
// 设置初始退款金额等数据
|
// 设置初始退款金额等数据
|
||||||
if (item) {
|
if (item) {
|
||||||
this.refundAmount = item.sales_price || 0;
|
this.refundAmount = item.refund_amount || 0;
|
||||||
this.maxRefundAmount = item.sales_price || 0;
|
this.maxRefundAmount = item.sales_price || 0;
|
||||||
|
this.merchantAddress = item.supplier_address || '未设置';
|
||||||
|
this.merchantContact = `${item.supplier_name} ${item.supplier_phone}` || '未设置';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@ -153,12 +157,13 @@ export default {
|
|||||||
this.afterSalePopup2 = false;
|
this.afterSalePopup2 = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
closeAfterSalePopup3() {
|
|
||||||
this.afterSalePopup3 = false;
|
|
||||||
},
|
|
||||||
|
|
||||||
// 选择售后类型
|
// 选择售后类型
|
||||||
selectAfterSaleType2(index) {
|
selectAfterSaleType2(index) {
|
||||||
|
if (index == 0) {
|
||||||
|
this.afterSalesType = 2;
|
||||||
|
} else {
|
||||||
|
this.afterSalesType = 1;
|
||||||
|
}
|
||||||
this.selectedAfterSaleType2 = index;
|
this.selectedAfterSaleType2 = index;
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -169,7 +174,7 @@ export default {
|
|||||||
|
|
||||||
// 确认退款原因选择
|
// 确认退款原因选择
|
||||||
confirmAfterSaleCancel2() {
|
confirmAfterSaleCancel2() {
|
||||||
const afterSaleTypes = ['退货退款', '退货'];
|
const afterSaleTypes = ['退货退款', '退款'];
|
||||||
const selectedType = afterSaleTypes[this.selectedAfterSaleType2];
|
const selectedType = afterSaleTypes[this.selectedAfterSaleType2];
|
||||||
console.log('选中的售后类型:', selectedType);
|
console.log('选中的售后类型:', selectedType);
|
||||||
|
|
||||||
@ -191,7 +196,6 @@ export default {
|
|||||||
|
|
||||||
// 打开选择服务类型或退款原因弹窗
|
// 打开选择服务类型或退款原因弹窗
|
||||||
openAfterSalePopup2(type) {
|
openAfterSalePopup2(type) {
|
||||||
this.afterSalePopup3 = false;
|
|
||||||
this.afterSalePopup2 = true;
|
this.afterSalePopup2 = true;
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -213,16 +217,14 @@ export default {
|
|||||||
// 修改退款金额
|
// 修改退款金额
|
||||||
modifyRefundAmount() {
|
modifyRefundAmount() {
|
||||||
console.log('修改退款金额');
|
console.log('修改退款金额');
|
||||||
// 这里可以添加修改退款金额的逻辑
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// 查看地址详情
|
// 查看地址详情
|
||||||
viewAddressDetails() {
|
viewAddressDetails() {
|
||||||
console.log('查看地址详情');
|
console.log('查看地址详情');
|
||||||
// 这里可以添加查看地址详情的逻辑
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// 提交退款申请
|
// 提交修改申请
|
||||||
submitRefundApplication() {
|
submitRefundApplication() {
|
||||||
if (!this.selectedServiceType || !this.selectedRefundReason) {
|
if (!this.selectedServiceType || !this.selectedRefundReason) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
@ -232,27 +234,39 @@ export default {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 输出弹窗中的所有内容
|
const params = {
|
||||||
const refundInfo = {
|
id: this.currentAfterSale.id,
|
||||||
serviceType: this.selectedServiceType,
|
after_sales_type: this.afterSalesType,
|
||||||
refundReason: this.selectedRefundReason,
|
after_sales_reason: this.selectedRefundReason,
|
||||||
refundAmount: this.refundAmount,
|
refund_amount: this.refundAmount,
|
||||||
maxRefundAmount: this.maxRefundAmount,
|
application_description: this.refundDescription,
|
||||||
postage: this.postage,
|
application_images: this.imgList && this.imgList.length > 0 ?
|
||||||
refundDescription: this.refundDescription,
|
this.imgList.map(img => img.url).join(',') : '',
|
||||||
refundMethod: this.refundMethod,
|
receiving_address: this.merchantAddress
|
||||||
merchantAddress: this.merchantAddress,
|
}
|
||||||
merchantContact: this.merchantContact,
|
console.log("🚀 ~ submitRefundApplication ~ params:", params)
|
||||||
imgList: this.imgList
|
request(apiArr.updateApply, "POST", params).then((res) => {
|
||||||
};
|
|
||||||
console.log('提交退款申请:', refundInfo);
|
|
||||||
|
|
||||||
this.afterSalePopup3 = false;
|
|
||||||
// 这里可以添加提交后的处理逻辑
|
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '退款申请提交成功',
|
title: '申请提交成功',
|
||||||
icon: 'success'
|
icon: 'success'
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 构造更新后的数据
|
||||||
|
const updatedAfterSale = {
|
||||||
|
...this.currentAfterSale,
|
||||||
|
after_sales_type: this.afterSalesType,
|
||||||
|
after_sales_reason: this.selectedRefundReason,
|
||||||
|
refund_amount: this.refundAmount,
|
||||||
|
application_description: this.refundDescription,
|
||||||
|
application_images: this.imgList && this.imgList.length > 0 ?
|
||||||
|
this.imgList.map(img => img.url).join(',') : ''
|
||||||
|
};
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
this.currentAfterSale = updatedAfterSale;
|
||||||
|
uni.setStorageSync('afterSaleItem', updatedAfterSale);
|
||||||
|
}, 1500);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@ -2,27 +2,23 @@
|
|||||||
<view class="order-list">
|
<view class="order-list">
|
||||||
<view class="order-item" v-for="(item, index) in orderList" :key="index">
|
<view class="order-item" v-for="(item, index) in orderList" :key="index">
|
||||||
<view class="order-header">
|
<view class="order-header">
|
||||||
<text class="order-name">{{ item.orderName }}</text>
|
<text class="order-name">{{ item.supplier_name }}</text>
|
||||||
<text class="order-number">{{ item.orderNumber }}</text>
|
<text class="order-number">{{ item.order_no }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="product-list">
|
<view class="product-list">
|
||||||
<view
|
<view class="product-item" v-for="(product, pIndex) in item.commodity_order_item_list" :key="pIndex">
|
||||||
class="product-item"
|
|
||||||
v-for="(product, pIndex) in item.products"
|
|
||||||
:key="pIndex"
|
|
||||||
>
|
|
||||||
<view class="product-info">
|
<view class="product-info">
|
||||||
<view class="product-img">
|
<view class="product-img">
|
||||||
<image :src="product.imageUrl" mode="aspectFit"></image>
|
<image :src="product.commodity_pic"></image>
|
||||||
<view class="tag" v-if="product.tag">{{ product.tag }}</view>
|
<view class="tag" v-if="product.is_same_day === 1">当日达</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="product-details">
|
<view class="product-details">
|
||||||
<text class="product-name">{{ product.name }}</text>
|
<text class="product-name">{{ product.goods_name }}</text>
|
||||||
<text class="product-spec">{{ product.spec }}</text>
|
<text class="product-spec">{{ product.goods_spec }}</text>
|
||||||
<text class="product-unit">{{ product.unit }}</text>
|
<text class="product-unit">{{ product.sales_price }}/{{ product.goods_unit }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<button class="evaluate-btn" @click="evaluateOrder(product)">
|
<button class="evaluate-btn" @click="evaluateOrder(item)">
|
||||||
评价
|
评价
|
||||||
</button>
|
</button>
|
||||||
</view>
|
</view>
|
||||||
@ -35,64 +31,35 @@
|
|||||||
import { request, NavgateTo } from "../../../utils";
|
import { request, NavgateTo } from "../../../utils";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
props: {
|
||||||
|
orderData: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
orderList: [
|
orderList: [],
|
||||||
{
|
|
||||||
orderName: "衡水商贸国际公司",
|
|
||||||
orderNumber: "4534534255",
|
|
||||||
products: [
|
|
||||||
{
|
|
||||||
imageUrl: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/product.png",
|
|
||||||
tag: "当日达",
|
|
||||||
name: "货品名称",
|
|
||||||
spec: "货品规格",
|
|
||||||
unit: "货品单位",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
imageUrl: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/product.png",
|
|
||||||
tag: "当日达",
|
|
||||||
name: "货品名称",
|
|
||||||
spec: "货品规格",
|
|
||||||
unit: "货品单位",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
orderNumber: "54352342331",
|
|
||||||
products: [
|
|
||||||
{
|
|
||||||
imageUrl: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/product.png",
|
|
||||||
tag: "",
|
|
||||||
name: "货品名称",
|
|
||||||
spec: "货品规格",
|
|
||||||
unit: "货品单位",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
imageUrl: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/product.png",
|
|
||||||
tag: "",
|
|
||||||
name: "货品名称",
|
|
||||||
spec: "货品规格",
|
|
||||||
unit: "货品单位",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
imageUrl: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/product.png",
|
|
||||||
tag: "",
|
|
||||||
name: "货品名称",
|
|
||||||
spec: "货品规格",
|
|
||||||
unit: "货品单位",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
evaluateOrder(item) {
|
evaluateOrder(item) {
|
||||||
console.log("🚀 ~ evaluateOrder ~ orderNumber:", item);
|
|
||||||
NavgateTo(`../evaluate/index?item=${JSON.stringify(item)}`);
|
NavgateTo(`../evaluate/index?item=${JSON.stringify(item)}`);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
mounted() {
|
||||||
|
// 组件挂载时初始化数据
|
||||||
|
this.orderList = this.orderData;
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// 监听orderData的变化,确保子组件能响应父组件数据更新
|
||||||
|
orderData: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.orderList = newVal;
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -213,12 +213,9 @@ page {
|
|||||||
|
|
||||||
.goods-desc {
|
.goods-desc {
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
color: #ff4d4f;
|
color: #999999;
|
||||||
background-color: #fff2f0;
|
|
||||||
padding: 4rpx 12rpx;
|
|
||||||
border-radius: 8rpx;
|
border-radius: 8rpx;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 10rpx 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.goods-price {
|
.goods-price {
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container page">
|
<view class="container page">
|
||||||
<!-- 进度指示器 -->
|
<!-- 进度指示器 -->
|
||||||
<view class="process-steps_top" v-if="false">
|
<view class="process-steps_top" v-if="currentAfterSale.process_status === 1">
|
||||||
<view class="step-item">
|
<view class="step-item">
|
||||||
<view class="step-line"></view>
|
<view class="step-line"></view>
|
||||||
<view class="step-circle active"></view>
|
<view class="step-circle active"></view>
|
||||||
@ -30,15 +30,15 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="status-tip" v-if="false">
|
<view class="status-tip" v-if="currentAfterSale.process_status === 3">
|
||||||
<text class="status-title">换货关闭</text>
|
<text class="status-title">换货关闭</text>
|
||||||
<text class="status-desc">2025年7月25日 11:30</text>
|
<text class="status-desc">{{ formatDate(currentAfterSale.revoke_time) }}</text>
|
||||||
<text class="status-desc">由于您主动撤销换货申请,换货关闭。</text>
|
<text class="status-desc">由于您主动撤销换货申请,换货关闭。</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="status-tip">
|
<view class="status-tip" v-if="currentAfterSale.review_status === 3">
|
||||||
<text class="status-title">换货关闭</text>
|
<text class="status-title">换货关闭</text>
|
||||||
<text class="status-desc">2025年7月25日 11:30</text>
|
<text class="status-desc">{{ formatDate(currentAfterSale.review_time) }}</text>
|
||||||
<text class="status-desc" style="color: #f63b08;">商家拒绝了您的换货申请,换货关闭</text>
|
<text class="status-desc" style="color: #f63b08;">商家拒绝了您的换货申请,换货关闭</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@ -59,16 +59,14 @@
|
|||||||
class="copy-icon" @click="copyRefundNo"/> -->
|
class="copy-icon" @click="copyRefundNo"/> -->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<image src="http://localhost:8080/af_update_address.png" class="icon_2" />
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/af_update_address.png"
|
||||||
|
class="icon_2" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<button class="addOrderIdBtn" @click="addOrderId">填写单号</button>
|
<button class="addOrderIdBtn" @click="addOrderId">填写单号</button>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- 商品信息 -->
|
<!-- 商品信息 -->
|
||||||
<view>
|
<view>
|
||||||
<view class="goods-info">
|
<view class="goods-info">
|
||||||
@ -82,10 +80,10 @@
|
|||||||
v-if="currentAfterSale.commodity_order_item[0].is_support_same_day === 1">当日达</text>
|
v-if="currentAfterSale.commodity_order_item[0].is_support_same_day === 1">当日达</text>
|
||||||
{{ currentAfterSale.commodity_order_item[0].goods_name }}
|
{{ currentAfterSale.commodity_order_item[0].goods_name }}
|
||||||
</text>
|
</text>
|
||||||
<text class="goods-desc">{{ ite.after_sales_reason }}</text>
|
<text class="goods-desc">{{ currentAfterSale.commodity_order_item[0].goods_spec }}</text>
|
||||||
<text class="goods-price">
|
<text class="goods-price">
|
||||||
{{ '¥' + currentAfterSale.commodity_order_item[0].sales_price.toFixed(2) + '/个' }}
|
{{ '¥' + currentAfterSale.commodity_order_item[0].sales_price.toFixed(2) + '/个' }}
|
||||||
<text class="goods-count">X{{ currentAfterSale.commodity_order_item[0].count }}</text>
|
<text class="goods-count">X{{ currentAfterSale.after_sales_goods.split('@')[0] }}</text>
|
||||||
</text>
|
</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -105,7 +103,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<text class="info-label">换货数量</text>
|
<text class="info-label">换货数量</text>
|
||||||
<text class="info-value">{{ currentAfterSale.commodity_order_item[0].count }}</text>
|
<text class="info-value">{{ currentAfterSale.change_goods }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<text class="info-label">申请时间</text>
|
<text class="info-label">申请时间</text>
|
||||||
@ -118,7 +116,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<text class="info-label">收货地址</text>
|
<text class="info-label">收货地址</text>
|
||||||
<text class="info-value">{{ currentAfterSale.user_address }}</text>
|
<text class="info-value">{{ currentAfterSale.receiving_address }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item" v-if="false">
|
<view class="info-item" v-if="false">
|
||||||
<text class="info-label">退款完结</text>
|
<text class="info-label">退款完结</text>
|
||||||
@ -128,7 +126,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 操作按钮 -->
|
<!-- 操作按钮 -->
|
||||||
<view class="action-buttons" v-if="false">
|
<view class="action-buttons" v-if="currentAfterSale.process_status === 1">
|
||||||
<button class="cancel-btn" @click="cancelRefund">撤销申请</button>
|
<button class="cancel-btn" @click="cancelRefund">撤销申请</button>
|
||||||
<button class="urge-btn" @click="modifyRefund">修改申请</button>
|
<button class="urge-btn" @click="modifyRefund">修改申请</button>
|
||||||
</view>
|
</view>
|
||||||
@ -199,6 +197,7 @@ import {
|
|||||||
upload,
|
upload,
|
||||||
NavgateTo
|
NavgateTo
|
||||||
} from '../../../utils';
|
} from '../../../utils';
|
||||||
|
import { apiArr } from "../../../api/afterSale";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
@ -219,7 +218,7 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getServiceTypeText(type) {
|
getServiceTypeText(type) {
|
||||||
return type === 1 ? '退货退款' : '仅退款';
|
return type === 1 ? '仅退款' : (type === 2 ? '退货退款' : '换货');
|
||||||
},
|
},
|
||||||
|
|
||||||
// 格式化日期
|
// 格式化日期
|
||||||
@ -281,11 +280,15 @@ export default {
|
|||||||
confirmColor: "#ff4d4f",
|
confirmColor: "#ff4d4f",
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
if (res.confirm) {
|
if (res.confirm) {
|
||||||
// 撤销售后接口
|
const params = {
|
||||||
|
id: this.currentAfterSale.id,
|
||||||
|
}
|
||||||
|
request(apiArr.revokeApply, "POST", params).then((res) => {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '订单撤销成功',
|
title: '订单撤销成功',
|
||||||
icon: 'success'
|
icon: 'success'
|
||||||
});
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@ -6,11 +6,11 @@
|
|||||||
<!-- 订单编号 -->
|
<!-- 订单编号 -->
|
||||||
<view class="order-info">
|
<view class="order-info">
|
||||||
<text class="order-label">订单编号</text>
|
<text class="order-label">订单编号</text>
|
||||||
<text class="order-value">38757328485</text>
|
<text class="order-value">{{ itemObj.order_no }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="goods">
|
<view class="goods">
|
||||||
<view>
|
<view>
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png" class="goodsImg"></image>
|
<image :src="itemObj.commodity_order_item_list[0].commodity_pic" class="goodsImg"></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="rating">
|
<view class="rating">
|
||||||
<view>很差</view>
|
<view>很差</view>
|
||||||
@ -23,70 +23,38 @@
|
|||||||
<!-- 商品品质 -->
|
<!-- 商品品质 -->
|
||||||
<view class="rating-item">
|
<view class="rating-item">
|
||||||
<text class="rating-label">商品品质</text>
|
<text class="rating-label">商品品质</text>
|
||||||
<u-rate
|
<u-rate v-model="qualityRating" size="40" active-color="#FFB400" inactive-color="#EEEEEE" gutter="60"></u-rate>
|
||||||
v-model="qualityRating"
|
|
||||||
size="40"
|
|
||||||
active-color="#FFB400"
|
|
||||||
inactive-color="#EEEEEE"
|
|
||||||
gutter="60"
|
|
||||||
></u-rate>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 配送速度 -->
|
<!-- 配送速度 -->
|
||||||
<view class="rating-item">
|
<view class="rating-item">
|
||||||
<text class="rating-label">配送速度</text>
|
<text class="rating-label">配送速度</text>
|
||||||
<u-rate
|
<u-rate v-model="speedRating" size="40" active-color="#FFB400" inactive-color="#EEEEEE" gutter="60"></u-rate>
|
||||||
v-model="speedRating"
|
|
||||||
size="40"
|
|
||||||
active-color="#FFB400"
|
|
||||||
inactive-color="#EEEEEE"
|
|
||||||
gutter="60"
|
|
||||||
></u-rate>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 快递员服务 -->
|
<!-- 快递员服务 -->
|
||||||
<view class="rating-item">
|
<view class="rating-item">
|
||||||
<text class="rating-label">快递员服务</text>
|
<text class="rating-label">快递员服务</text>
|
||||||
<u-rate
|
<u-rate v-model="serviceRating" size="40" active-color="#FFB400" inactive-color="#EEEEEE" gutter="60"></u-rate>
|
||||||
v-model="serviceRating"
|
|
||||||
size="40"
|
|
||||||
active-color="#FFB400"
|
|
||||||
inactive-color="#EEEEEE"
|
|
||||||
gutter="60"
|
|
||||||
></u-rate>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 评价输入 -->
|
<!-- 评价输入 -->
|
||||||
<view class="comment-section">
|
<view class="comment-section">
|
||||||
<textarea
|
<textarea class="comment-input" placeholder="展开说说对商品的想法吧…" v-model="comment"></textarea>
|
||||||
class="comment-input"
|
|
||||||
placeholder="展开说说对商品的想法吧…"
|
|
||||||
v-model="comment"
|
|
||||||
></textarea>
|
|
||||||
</view>
|
</view>
|
||||||
<!-- 图片上传 -->
|
<!-- 图片上传 -->
|
||||||
<view class="upload-section">
|
<view class="upload-section">
|
||||||
<view class="image-list">
|
<view class="image-list">
|
||||||
<view
|
<view class="image-item" v-for="(img, index) in imageList" :key="index">
|
||||||
class="image-item"
|
|
||||||
v-for="(img, index) in imageList"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<image :src="img" class="uploaded-img"></image>
|
<image :src="img" class="uploaded-img"></image>
|
||||||
<view class="delete-btn" @click="deleteImage(index)">
|
<view class="delete-btn" @click="deleteImage(index)">
|
||||||
<text class="delete-icon">×</text>
|
<text class="delete-icon">×</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view
|
<view class="upload-btn" @click="chooseImage" v-if="imageList.length < 3">
|
||||||
class="upload-btn"
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/upload.png" class="upload-icon">
|
||||||
@click="chooseImage"
|
</image>
|
||||||
v-if="imageList.length < 3"
|
|
||||||
>
|
|
||||||
<image
|
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/upload.png"
|
|
||||||
class="upload-icon"
|
|
||||||
></image>
|
|
||||||
<view class="upload-text">上传图片</view>
|
<view class="upload-text">上传图片</view>
|
||||||
<view class="upload-count">({{ imageList.length }}/3)</view>
|
<view class="upload-count">({{ imageList.length }}/3)</view>
|
||||||
</view>
|
</view>
|
||||||
@ -101,31 +69,22 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import uImage from "../../../uni_modules/uview-ui/components/u--image/u--image.vue";
|
import uImage from "../../../uni_modules/uview-ui/components/u--image/u--image.vue";
|
||||||
|
import { picUrl, NavgateTo, request } from "../../../utils";
|
||||||
|
import { apiArr } from "../../../api/afterSale";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { uImage },
|
components: { uImage },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// 商品列表
|
|
||||||
goods: [
|
|
||||||
{ image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index1.png" },
|
|
||||||
{ image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index2.png" },
|
|
||||||
{ image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index3.png" },
|
|
||||||
{ image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index4.png" },
|
|
||||||
{ image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index5.png" },
|
|
||||||
{ image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index1.png" },
|
|
||||||
{ image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index2.png" },
|
|
||||||
{ image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index3.png" },
|
|
||||||
{ image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index4.png" },
|
|
||||||
{ image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index5.png" },
|
|
||||||
],
|
|
||||||
// 评分数据
|
// 评分数据
|
||||||
qualityRating: 5,
|
qualityRating: 0,
|
||||||
speedRating: 0,
|
speedRating: 0,
|
||||||
serviceRating: 0,
|
serviceRating: 0,
|
||||||
// 评价内容
|
// 评价内容
|
||||||
comment: "",
|
comment: "",
|
||||||
// 图片列表
|
// 图片列表
|
||||||
imageList: [],
|
imageList: [],
|
||||||
|
itemObj: {},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@ -160,7 +119,17 @@ export default {
|
|||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
//
|
const params = {
|
||||||
|
order_id: this.itemObj.id,
|
||||||
|
goods_id: this.itemObj.commodity_order_item_list[0].goods_id,
|
||||||
|
user_id: uni.getStorageSync("userId"),
|
||||||
|
quality_score: this.qualityRating,
|
||||||
|
speed_score: this.speedRating,
|
||||||
|
service_score: this.serviceRating,
|
||||||
|
user_review: this.comment,
|
||||||
|
review_image: this.imageList,
|
||||||
|
}
|
||||||
|
request(apiArr.createReview, "POST", params).then((res) => {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: "评价提交成功",
|
title: "评价提交成功",
|
||||||
icon: "success",
|
icon: "success",
|
||||||
@ -168,11 +137,11 @@ export default {
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
uni.navigateBack();
|
uni.navigateBack();
|
||||||
}, 1500);
|
}, 1500);
|
||||||
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
console.log("🚀 ~ onLoad ~ options:", options);
|
this.itemObj = JSON.parse(decodeURIComponent(options.item));
|
||||||
const itemObj = JSON.parse(decodeURIComponent(options.item));
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
594
packages/myOrders/groupOrders/index.css
Normal file
594
packages/myOrders/groupOrders/index.css
Normal file
@ -0,0 +1,594 @@
|
|||||||
|
page {
|
||||||
|
background-color: #f6f7fb;
|
||||||
|
padding-bottom: 50rpx;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: #ffffff;
|
||||||
|
height: 100rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
overflow-x: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #a3a3a3;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orderTitle {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orderTitleSupplier {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
color: #ff5252;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status2 {
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
border: 1rpx solid #f83d19;
|
||||||
|
display: flex;
|
||||||
|
padding: 10rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status2 img {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status3 {
|
||||||
|
color: #949494;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order_status{
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.afterSaleNum {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #ff3710;
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
right: 230rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yfd-btn {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
background: #ffebcb;
|
||||||
|
color: #802002;
|
||||||
|
border: none;
|
||||||
|
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;
|
||||||
|
margin-left: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.required{
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-reason-container {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
max-height: 80vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asType {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asType text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asTabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asTab {
|
||||||
|
padding: 15rpx 20rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asTab.active {
|
||||||
|
border: 1rpx solid #ff5252;
|
||||||
|
color: #ff5252;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asTabs2 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asTab2 {
|
||||||
|
width: 50%;
|
||||||
|
padding: 15rpx 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asTab2.active {
|
||||||
|
border-bottom: 1rpx solid #ff5252;
|
||||||
|
color: #ff5252;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodsInfo {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodInfo {
|
||||||
|
display: flex;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodRadio{
|
||||||
|
margin-top: 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodImg {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodDetail {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodTitle {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
line-height: 40rpx;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodTag {
|
||||||
|
background-color: #ff7d00;
|
||||||
|
color: white;
|
||||||
|
font-size: 22rpx;
|
||||||
|
padding: 5rpx 10rpx;
|
||||||
|
border-radius: 20rpx 0 20rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodTag1 {
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-img {
|
||||||
|
position: absolute;
|
||||||
|
top: 145rpx;
|
||||||
|
left: 130rpx;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodDesc {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodPrice {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ff5252;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodNum {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
align-self: flex-start;
|
||||||
|
margin-top: 120rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reason-list {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reason-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio {
|
||||||
|
width: 28rpx;
|
||||||
|
height: 28rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2rpx solid #999;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio.active {
|
||||||
|
border-color: #e60012;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio.active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 14rpx;
|
||||||
|
height: 14rpx;
|
||||||
|
background-color: #e60012;
|
||||||
|
border-radius: 50%;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reason-item text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 88rpx;
|
||||||
|
background-color: #ff451b;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 32rpx;
|
||||||
|
border-radius: 44rpx;
|
||||||
|
line-height: 88rpx;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noSalePopup {
|
||||||
|
padding: 50rpx 50rpx 0 50rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noSalePopup-btn {
|
||||||
|
width: 250rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
background-color: #e60012;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 32rpx;
|
||||||
|
border-radius: 44rpx;
|
||||||
|
line-height: 70rpx;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 40rpx;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 确认退款信息弹窗样式 */
|
||||||
|
.refund-info-container {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-item {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 26rpx;
|
||||||
|
padding-bottom: 26rpx;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hr{
|
||||||
|
position: relative;
|
||||||
|
left: -30rpx;
|
||||||
|
right: -30rpx;
|
||||||
|
width: 120%;
|
||||||
|
height: 20rpx;
|
||||||
|
background-color: #f0f2f5;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-item2 {
|
||||||
|
margin-bottom: 26rpx;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-label {
|
||||||
|
width: 200rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-value {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
text-align: right;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price {
|
||||||
|
color: #ff4d4f;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modify-btn {
|
||||||
|
color: #989898;
|
||||||
|
font-size: 26rpx;
|
||||||
|
margin-left: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-hint {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
text-align: right;
|
||||||
|
position: absolute;
|
||||||
|
top: 45rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-description {
|
||||||
|
width: 100%;
|
||||||
|
height: 160rpx;
|
||||||
|
border: 1rpx solid #e8e8e8;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333333;
|
||||||
|
resize: none;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-attachment {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #1989fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-icon {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 90rpx;
|
||||||
|
background-color: #ff4d4f;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 32rpx;
|
||||||
|
border-radius: 45rpx;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-right {
|
||||||
|
display: inline-block;
|
||||||
|
width: 14rpx;
|
||||||
|
height: 14rpx;
|
||||||
|
border-top: 2rpx solid #999999;
|
||||||
|
border-right: 2rpx solid #999999;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图片上传 */
|
||||||
|
.imgCon {
|
||||||
|
font-size: 18rpx;
|
||||||
|
color: #222222;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
background: #F6F7FB;
|
||||||
|
border: 1rpx solid #D1D1D1;
|
||||||
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||||
|
margin: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgCon image {
|
||||||
|
width: 34rpx;
|
||||||
|
height: 34rpx;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-upload__wrap__preview {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
border-radius: 10rpx 0rpx 10rpx 10rpx !important;
|
||||||
|
margin-top: 20rpx !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-upload__wrap__preview__image {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
416
packages/myOrders/groupOrders/index.vue
Normal file
416
packages/myOrders/groupOrders/index.vue
Normal file
@ -0,0 +1,416 @@
|
|||||||
|
<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-if="selectedTab === 6">
|
||||||
|
<awaitRated :orderData="orderData" />
|
||||||
|
</view>
|
||||||
|
<view v-else-if="selectedTab === 7">
|
||||||
|
<rated :orderData="orderData" />
|
||||||
|
</view>
|
||||||
|
<view v-else-if="selectedTab === 8">
|
||||||
|
<afterSale :afterSaleList="afterSaleList" @revokeApply="revokeApply" />
|
||||||
|
</view>
|
||||||
|
<view v-else>
|
||||||
|
<view v-for="(item, index) in orderData" :key="index">
|
||||||
|
<view class="contentList">
|
||||||
|
<!-- 订单头部信息 -->
|
||||||
|
<view class="order-header" @click="toDetails(item)">
|
||||||
|
<view class="orderTitle">
|
||||||
|
<view class="orderTitleSupplier">{{ item.supplier_name }}
|
||||||
|
<view v-if="item.order_status == 6 || item.order_status == 5" class="status3">{{
|
||||||
|
getOrderStatus(item.order_status) }}</view>
|
||||||
|
<view v-else-if="item.order_status == 7" class="status2">
|
||||||
|
<img src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/refund.png" />
|
||||||
|
{{ getOrderStatus(item.order_status) }}
|
||||||
|
</view>
|
||||||
|
<view v-else class="order_status">{{
|
||||||
|
getOrderStatus(item.order_status)
|
||||||
|
}}</view>
|
||||||
|
</view>
|
||||||
|
<text>提交订单:{{ item.order_time }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 商品列表 -->
|
||||||
|
<view class="goods-list" @click="toDetails(item)">
|
||||||
|
<view v-for="(goods, goodsIndex) in item.commodity_order_item_list" :key="goodsIndex" class="goods-item">
|
||||||
|
<image :src="goods.commodity_pic" class="goods-img"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 订单底部信息 -->
|
||||||
|
<view class="order-footer">
|
||||||
|
<view class="order-footer-text" @click="toDetails(item)">共{{ item.total_count }}件商品,共计
|
||||||
|
<text> {{ item.total_amount }}</text>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<view class="btn-group" v-if="item.order_status === 1">
|
||||||
|
<button class="cancel-btn" @click="cancelOrder(item)">
|
||||||
|
取消订单
|
||||||
|
</button>
|
||||||
|
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
||||||
|
<button class="pay-btn" @click="goToPay(item)">立即支付</button>
|
||||||
|
</view>
|
||||||
|
<view class="btn-group" v-if="item.order_status === 3">
|
||||||
|
<button class="cancel-btn" @click="applyRefund(item)">申请退款</button>
|
||||||
|
</view>
|
||||||
|
<view class="btn-group" v-if="item.order_status === 4">
|
||||||
|
<button class="cancel-btn" @click="viewLogistics(item)">查看物流</button>
|
||||||
|
<button class="pay-btn" @click="confirmReceiving(item)">确认收货</button>
|
||||||
|
</view>
|
||||||
|
<view class="btn-group" v-if="item.order_status === 5">
|
||||||
|
<!-- <text class="afterSaleNum">{{ item.commodity_order_item_list.length }}笔售后</text> -->
|
||||||
|
<button class="cancel-btn" @click="afterSale(item)">退换/售后</button>
|
||||||
|
<button class="pay-btn" @click="orderEvaluate(item)" :disabled="item.evauate_status === 1">评价</button>
|
||||||
|
</view>
|
||||||
|
<view class="btn-group" v-if="item.order_status === 6">
|
||||||
|
<!-- <button class="cancel-btn" @click="orderEvaluate">
|
||||||
|
服务评价
|
||||||
|
</button>
|
||||||
|
<button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
||||||
|
<!-- <button class="pay-btn" @click="goToPay(item)">再来一单</button> -->
|
||||||
|
</view>
|
||||||
|
<view class="btn-group" v-if="item.order_status === 7">
|
||||||
|
<!-- <button class="pay-btn" @click="goToPay(item)">再来一单</button> -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!------------------ 以下为popup ------------------>
|
||||||
|
<!-- 取消订单 -->
|
||||||
|
<cancel-order-popup :showPopup.sync="showPopup" @orderCancelled="handleOrderCancelled" />
|
||||||
|
|
||||||
|
<!-- 申请退款 -->
|
||||||
|
<refund-popup :showPopup.sync="showTkPopup" @refundConfirmed="handleRefundConfirmed" />
|
||||||
|
|
||||||
|
<!-- 退换 售后 - 选择退款原因 -->
|
||||||
|
<!-- 售后弹窗组件 -->
|
||||||
|
<after-sale-popup :afterSaleGoods.sync="afterSaleGoods" :orderItem="afterSaleOrderItem" ref="afterSalePopupRef"
|
||||||
|
@refundSubmitted="handleRefundSubmitted" :order_cate="2" />
|
||||||
|
|
||||||
|
<!-- 无售后商品 -->
|
||||||
|
<view>
|
||||||
|
<u-popup ref="popup" mode="center" :show="noSalePopup" :round="15" :mask-close-able="false">
|
||||||
|
<view class="noSalePopup">
|
||||||
|
<view>抱歉该订单已无可申请售后的商品</view>
|
||||||
|
<button class="noSalePopup-btn" @click="noSalePopup = false">我知道了</button>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
isPhone,
|
||||||
|
picUrl,
|
||||||
|
request,
|
||||||
|
upload,
|
||||||
|
NavgateTo
|
||||||
|
} from '../../../utils';
|
||||||
|
import { apiArr as afterSaleApi } from "../../../api/afterSale";
|
||||||
|
import Rated from "../rated/rated.vue";
|
||||||
|
import AwaitRated from "../awaitRated/awaitRated.vue";
|
||||||
|
import AfterSale from "../afterSale/index.vue";
|
||||||
|
import cancelOrderPopup from '../index/popup/cancelOrder/cancelOrder.vue';
|
||||||
|
import refundPopup from '../index/popup/refund/refund.vue';
|
||||||
|
import afterSalePopup from '../index/popup/afterSale/index.vue';
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Rated,
|
||||||
|
AwaitRated,
|
||||||
|
AfterSale,
|
||||||
|
cancelOrderPopup,
|
||||||
|
refundPopup,
|
||||||
|
afterSalePopup
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
categoryList: [
|
||||||
|
{ category_name: "全部" },
|
||||||
|
{ category_name: "待付款" },
|
||||||
|
{ category_name: "备货中" },
|
||||||
|
{ category_name: "待自提" },
|
||||||
|
{ category_name: "已完成" },
|
||||||
|
{ category_name: "已取消" },
|
||||||
|
{ category_name: "待评价" },
|
||||||
|
{ category_name: "已评价" },
|
||||||
|
{ category_name: "售后" },
|
||||||
|
],
|
||||||
|
selectedTab: 0,
|
||||||
|
// orderData: orderMockData,
|
||||||
|
orderData: [],
|
||||||
|
|
||||||
|
showPopup: false,//取消订单
|
||||||
|
afterSaleGoods: [],//售后商品列表
|
||||||
|
afterSaleOrderItem: {},//售后订单对象
|
||||||
|
noSalePopup: false,//无售后商品
|
||||||
|
showTkPopup: false,//申请退款
|
||||||
|
afterSaleItem: '',//操作对象
|
||||||
|
afterSaleList: [],//售后列表
|
||||||
|
selectStatus: '',//选中的status
|
||||||
|
evaluateStatus: '',//评价状态
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
selectTab(index, item) {
|
||||||
|
this.selectedTab = index;
|
||||||
|
if (index == 6) {
|
||||||
|
this.evaluateStatus = 2;
|
||||||
|
this.selectStatus = ''
|
||||||
|
} else if (index == 7) {
|
||||||
|
this.evaluateStatus = 1;
|
||||||
|
this.selectStatus = ''
|
||||||
|
} else if (index == 2) {
|
||||||
|
this.selectStatus = 3;
|
||||||
|
this.evaluateStatus = ''
|
||||||
|
} else {
|
||||||
|
this.selectStatus = index > 2 ? index + 1 : index;
|
||||||
|
this.evaluateStatus = ''
|
||||||
|
}
|
||||||
|
this.getOrderList();
|
||||||
|
},
|
||||||
|
// 取消订单
|
||||||
|
cancelOrder(item) {
|
||||||
|
this.afterSaleItem = item;
|
||||||
|
this.showPopup = true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理订单取消事件
|
||||||
|
handleOrderCancelled(data) {
|
||||||
|
const params = {
|
||||||
|
order_id: this.afterSaleItem.id,
|
||||||
|
method: 1,
|
||||||
|
cancel_reason: data.reason,
|
||||||
|
}
|
||||||
|
request(afterSaleApi.cancelOrConfirm, "POST", params).then((res) => {
|
||||||
|
this.getOrderList();
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
// 售后按钮
|
||||||
|
afterSale(item) {
|
||||||
|
this.afterSaleGoods = item.commodity_order_item_list;
|
||||||
|
// 保存完整的订单对象
|
||||||
|
this.afterSaleOrderItem = item;
|
||||||
|
this.$refs.afterSalePopupRef.openAfterSalePopup();
|
||||||
|
console.log(item.id);
|
||||||
|
|
||||||
|
// 根据条件判断是否可以售后
|
||||||
|
// request(afterSaleApi.isAllow, "POST", {
|
||||||
|
// order_id: item.id,
|
||||||
|
// }).then((res) => {
|
||||||
|
// if (res.data.is_allow_after_sales) {
|
||||||
|
// this.afterSaleGoods = res.data.allow_items;
|
||||||
|
// // this.selectedAsGood = item.commodity_order_item_list[0].id;
|
||||||
|
// this.$refs.afterSalePopupRef.openAfterSalePopup();
|
||||||
|
// } else {
|
||||||
|
// this.noSalePopup = true
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理退款提交事件
|
||||||
|
handleRefundSubmitted(data) {
|
||||||
|
const params = {
|
||||||
|
nick_name: uni.getStorageSync("nickName"),
|
||||||
|
order_id: this.afterSaleOrderItem.id,
|
||||||
|
goods_ids: this.afterSaleOrderItem.commodity_order_item_list.map(item => item.goods_id),
|
||||||
|
after_sales_type: data.afterSalesType,
|
||||||
|
after_sales_reason: data.refundReason,
|
||||||
|
refund_amount: data.refundAmount,
|
||||||
|
application_description: data.refundDescription,
|
||||||
|
// 将图片对象数组转换为字符串数组,多个URL用逗号分隔
|
||||||
|
application_images: data.imgList && data.imgList.length > 0 ?
|
||||||
|
data.imgList.map(img => img.url).join(',') : '',
|
||||||
|
order_status: 5,
|
||||||
|
receiving_address: data.merchantAddress,
|
||||||
|
change_goods_id: data.changeServiceId
|
||||||
|
}
|
||||||
|
request(afterSaleApi.afterSaleCreate, "POST", params).then((res) => {
|
||||||
|
this.getOrderList();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
// 申请退款
|
||||||
|
applyRefund(item) {
|
||||||
|
this.afterSaleItem = item;
|
||||||
|
this.showTkPopup = true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 查看物流
|
||||||
|
viewLogistics(item) {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理退款确认事件
|
||||||
|
handleRefundConfirmed(data) {
|
||||||
|
const params = {
|
||||||
|
order_id: this.afterSaleItem.id,
|
||||||
|
}
|
||||||
|
request(afterSaleApi.orderRefund, "POST", params).then((res) => {
|
||||||
|
uni.showToast({ title: "退款成功", icon: "none" });
|
||||||
|
this.getOrderList();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 确认收货
|
||||||
|
confirmReceiving(item) {
|
||||||
|
uni.showModal({
|
||||||
|
title: "确认收货",
|
||||||
|
content: "确认收货后订单状态将变为【已完成】,如有售后需求可正常申请退款/售后,确定要确认收货吗?",
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
const params = {
|
||||||
|
order_id: item.id,
|
||||||
|
method: 2,
|
||||||
|
}
|
||||||
|
request(afterSaleApi.cancelOrConfirm, "POST", params).then((res) => {
|
||||||
|
this.getOrderList();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
goToPay(item) {
|
||||||
|
// 创建转换后的商品数组
|
||||||
|
const transformedItems = item.commodity_order_item_list.map(goods => ({
|
||||||
|
isafterSale: true,
|
||||||
|
orderId: item.id,
|
||||||
|
commodity_goods_info: {
|
||||||
|
commodity_brief: "",
|
||||||
|
commodity_id: goods.commodity_id,
|
||||||
|
commodity_pic: goods.commodity_pic,
|
||||||
|
goods_alias: goods.goods_name,
|
||||||
|
goods_carousel: "",
|
||||||
|
goods_detail_pic: "",
|
||||||
|
goods_intro: goods.goods_name,
|
||||||
|
goods_name: goods.goods_name,
|
||||||
|
goods_no: "",
|
||||||
|
goods_spec: goods.goods_spec,
|
||||||
|
goods_status: 1,
|
||||||
|
goods_unit: goods.goods_unit,
|
||||||
|
goods_video: "",
|
||||||
|
group_buy_activity_info: null,
|
||||||
|
id: goods.id,
|
||||||
|
is_same_day: goods.is_same_day || false,
|
||||||
|
is_support_same_day: goods.is_support_same_day || 2,
|
||||||
|
market_price: goods.sales_price,
|
||||||
|
sales_price: goods.sales_price,
|
||||||
|
stock_quantity: goods.stock_quantity
|
||||||
|
},
|
||||||
|
commodity_id: goods.commodity_id,
|
||||||
|
count: goods.count,
|
||||||
|
create_time: item.create_time,
|
||||||
|
goods_id: goods.goods_id,
|
||||||
|
group_buy_id: 0,
|
||||||
|
id: goods.id,
|
||||||
|
supplier_id: item.supplier_id,
|
||||||
|
supplier_name: item.supplier_name,
|
||||||
|
update_time: item.update_time,
|
||||||
|
user_id: item.user_id
|
||||||
|
}));
|
||||||
|
|
||||||
|
NavgateTo(`/packages/shop/groupPurchaseSubmit/index?shopCarList=${JSON.stringify(transformedItems)}`)
|
||||||
|
},
|
||||||
|
toDetails(item) {
|
||||||
|
NavgateTo(
|
||||||
|
`/packages/myOrders/orderDetails/index?item=${JSON.stringify(item)}`
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
checkLogistics() {
|
||||||
|
NavgateTo(`/packages/myOrders/logistics/index`);
|
||||||
|
},
|
||||||
|
|
||||||
|
orderEvaluate(item) {
|
||||||
|
NavgateTo(`/packages/myOrders/orderEvaluate/index?item=${JSON.stringify(item)}`);
|
||||||
|
},
|
||||||
|
|
||||||
|
getOrderStatus(order_status) {
|
||||||
|
switch (order_status) {
|
||||||
|
case 1:
|
||||||
|
return "待付款";
|
||||||
|
case 2:
|
||||||
|
return "支付中";
|
||||||
|
case 3:
|
||||||
|
return "备货中";
|
||||||
|
case 4:
|
||||||
|
return "待自提";
|
||||||
|
case 5:
|
||||||
|
return "已完成";
|
||||||
|
case 6:
|
||||||
|
return "已取消";
|
||||||
|
case 7:
|
||||||
|
return "退款中";
|
||||||
|
case 8:
|
||||||
|
return "已退款";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getOrderList() {
|
||||||
|
this.orderData = []
|
||||||
|
request(afterSaleApi.orderList, "POST", {
|
||||||
|
order_status: this.selectStatus,
|
||||||
|
evaluate_status: this.evaluateStatus,
|
||||||
|
user_id: uni.getStorageSync("userId"),
|
||||||
|
}).then((res) => {
|
||||||
|
res.order_list?.forEach(item => {
|
||||||
|
item.commodity_order_item_list?.forEach(good => {
|
||||||
|
good.commodity_pic = picUrl + good.commodity_pic;
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
this.orderData = res.order_list.filter(item => item.order_cate === 2);
|
||||||
|
this.getAfterSaleList();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getAfterSaleList() {
|
||||||
|
const params = {
|
||||||
|
user_id: uni.getStorageSync('userId'),
|
||||||
|
order_cate: 2,
|
||||||
|
}
|
||||||
|
request(afterSaleApi.afterSalesList, "POST", params).then((res) => {
|
||||||
|
res.after_sales_list?.forEach(item => {
|
||||||
|
item.commodity_order_item?.forEach(good => {
|
||||||
|
good.commodity_pic = picUrl + good.commodity_pic;
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.afterSaleList = res.after_sales_list;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理订单撤销成功事件
|
||||||
|
revokeApply() {
|
||||||
|
this.getOrderList();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onLoad(options) {
|
||||||
|
this.getOrderList();
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
this.getOrderList();
|
||||||
|
uni.removeStorageSync('afterSaleItem')
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
@import url("./index.css");
|
||||||
|
</style>
|
||||||
@ -1,6 +1,6 @@
|
|||||||
page {
|
page {
|
||||||
background-color: #f6f7fb;
|
background-color: #f6f7fb;
|
||||||
padding-bottom: 0;
|
padding-bottom: 50rpx;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -59,9 +59,25 @@ page {
|
|||||||
border-bottom: 1rpx solid #eee;
|
border-bottom: 1rpx solid #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.orderTitle {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orderTitleSupplier {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
.status {
|
.status {
|
||||||
color: #ff5252;
|
color: #ff5252;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
font-size: 24rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status2 {
|
.status2 {
|
||||||
@ -71,6 +87,7 @@ page {
|
|||||||
display: flex;
|
display: flex;
|
||||||
padding: 10rpx;
|
padding: 10rpx;
|
||||||
border-radius: 10rpx;
|
border-radius: 10rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status2 img {
|
.status2 img {
|
||||||
@ -82,6 +99,13 @@ page {
|
|||||||
.status3 {
|
.status3 {
|
||||||
color: #949494;
|
color: #949494;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order_status{
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 24rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.goods-list {
|
.goods-list {
|
||||||
|
|||||||
@ -5,24 +5,26 @@
|
|||||||
:class="['tabItem', selectedTab === index ? 'active2' : '']" @click="selectTab(index, item)">
|
:class="['tabItem', selectedTab === index ? 'active2' : '']" @click="selectTab(index, item)">
|
||||||
{{ item.category_name }}
|
{{ item.category_name }}
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<view v-if="selectedTab === 6">
|
<view v-if="selectedTab === 6">
|
||||||
<awaitRated />
|
<awaitRated :orderData="orderData" />
|
||||||
</view>
|
</view>
|
||||||
<view v-if="selectedTab === 7">
|
<view v-else-if="selectedTab === 7">
|
||||||
<rated />
|
<rated :orderData="orderData" />
|
||||||
</view>
|
</view>
|
||||||
<view v-if="selectedTab === 8">
|
<view v-else-if="selectedTab === 8">
|
||||||
<afterSale />
|
<afterSale :afterSaleList="afterSaleList" @revokeApply="revokeApply" />
|
||||||
</view>
|
</view>
|
||||||
<view v-else>
|
<view v-else>
|
||||||
<view v-for="(item, index) in orderData" :key="index">
|
<view v-for="(item, index) in orderData" :key="index">
|
||||||
<view class="contentList">
|
<view class="contentList">
|
||||||
<!-- 订单头部信息 -->
|
<!-- 订单头部信息 -->
|
||||||
<view class="order-header" @click="toDetails(item)">
|
<view class="order-header" @click="toDetails(item)">
|
||||||
<text>提交订单:{{ item.order_time }}</text>
|
<view class="orderTitle">
|
||||||
|
<view class="orderTitleSupplier">{{ item.supplier_name }}
|
||||||
<view v-if="item.order_status == 6 || item.order_status == 5" class="status3">{{
|
<view v-if="item.order_status == 6 || item.order_status == 5" class="status3">{{
|
||||||
getOrderStatus(item.order_status) }}</view>
|
getOrderStatus(item.order_status) }}</view>
|
||||||
<view v-else-if="item.order_status == 7" class="status2">
|
<view v-else-if="item.order_status == 7" class="status2">
|
||||||
@ -33,6 +35,9 @@
|
|||||||
getOrderStatus(item.order_status)
|
getOrderStatus(item.order_status)
|
||||||
}}</view>
|
}}</view>
|
||||||
</view>
|
</view>
|
||||||
|
<text>提交订单:{{ item.order_time }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<!-- 商品列表 -->
|
<!-- 商品列表 -->
|
||||||
<view class="goods-list" @click="toDetails(item)">
|
<view class="goods-list" @click="toDetails(item)">
|
||||||
@ -52,29 +57,29 @@
|
|||||||
取消订单
|
取消订单
|
||||||
</button>
|
</button>
|
||||||
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
||||||
<button class="pay-btn" @click="goToPay">立即支付</button>
|
<button class="pay-btn" @click="goToPay(item)">立即支付</button>
|
||||||
</view>
|
</view>
|
||||||
<view class="btn-group" v-if="item.order_status === 3">
|
<view class="btn-group" v-if="item.order_status === 3">
|
||||||
<button class="cancel-btn" @click="applyRefund(item)">申请退款</button>
|
<button class="cancel-btn" @click="applyRefund(item)">申请退款</button>
|
||||||
</view>
|
</view>
|
||||||
<view class="btn-group" v-if="item.order_status === 4">
|
<view class="btn-group" v-if="item.order_status === 4">
|
||||||
<button class="cancel-btn" @click="cancelOrder">查看物流</button>
|
<button class="cancel-btn" @click="viewLogistics(item)">查看物流</button>
|
||||||
<button class="pay-btn" @click="confirmReceiving(item)">确认收货</button>
|
<button class="pay-btn" @click="confirmReceiving(item)">确认收货</button>
|
||||||
</view>
|
</view>
|
||||||
<view class="btn-group" v-if="item.order_status === 5">
|
<view class="btn-group" v-if="item.order_status === 5">
|
||||||
<text class="afterSaleNum">4笔售后</text>
|
<!-- <text class="afterSaleNum">{{ item.commodity_order_item_list.length }}笔售后</text> -->
|
||||||
<button class="cancel-btn" @click="afterSale(item)">退换/售后</button>
|
<button class="cancel-btn" @click="afterSale(item)">退换/售后</button>
|
||||||
<button class="pay-btn" @click="cancelOrder">评价</button>
|
<button class="pay-btn" @click="orderEvaluate(item)" :disabled="item.evauate_status === 1">评价</button>
|
||||||
</view>
|
</view>
|
||||||
<view class="btn-group" v-if="item.order_status === 6">
|
<view class="btn-group" v-if="item.order_status === 6">
|
||||||
<!-- <button class="cancel-btn" @click="orderEvaluate">
|
<!-- <button class="cancel-btn" @click="orderEvaluate">
|
||||||
服务评价
|
服务评价
|
||||||
</button>
|
</button>
|
||||||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
<button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
||||||
<button class="pay-btn" @click="cancelOrder">再来一单</button> -->
|
<!-- <button class="pay-btn" @click="goToPay(item)">再来一单</button> -->
|
||||||
</view>
|
</view>
|
||||||
<view class="btn-group" v-if="item.order_status === 7">
|
<view class="btn-group" v-if="item.order_status === 7">
|
||||||
<button class="pay-btn" @click="cancelOrder">再来一单</button>
|
<!-- <button class="pay-btn" @click="goToPay(item)">再来一单</button> -->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -92,8 +97,8 @@
|
|||||||
|
|
||||||
<!-- 退换 售后 - 选择退款原因 -->
|
<!-- 退换 售后 - 选择退款原因 -->
|
||||||
<!-- 售后弹窗组件 -->
|
<!-- 售后弹窗组件 -->
|
||||||
<after-sale-popup :afterSaleGoods.sync="afterSaleGoods" ref="afterSalePopupRef"
|
<after-sale-popup :afterSaleGoods.sync="afterSaleGoods" :orderItem="afterSaleOrderItem" ref="afterSalePopupRef"
|
||||||
@refundSubmitted="handleRefundSubmitted" />
|
@refundSubmitted="handleRefundSubmitted" :order_cate="1" />
|
||||||
|
|
||||||
<!-- 无售后商品 -->
|
<!-- 无售后商品 -->
|
||||||
<view>
|
<view>
|
||||||
@ -116,7 +121,6 @@ import {
|
|||||||
upload,
|
upload,
|
||||||
NavgateTo
|
NavgateTo
|
||||||
} from '../../../utils';
|
} from '../../../utils';
|
||||||
import { apiArr } from "../../../api/order";
|
|
||||||
import { apiArr as afterSaleApi } from "../../../api/afterSale";
|
import { apiArr as afterSaleApi } from "../../../api/afterSale";
|
||||||
import Rated from "../rated/rated.vue";
|
import Rated from "../rated/rated.vue";
|
||||||
import AwaitRated from "../awaitRated/awaitRated.vue";
|
import AwaitRated from "../awaitRated/awaitRated.vue";
|
||||||
@ -124,7 +128,6 @@ import AfterSale from "../afterSale/index.vue";
|
|||||||
import cancelOrderPopup from './popup/cancelOrder/cancelOrder.vue';
|
import cancelOrderPopup from './popup/cancelOrder/cancelOrder.vue';
|
||||||
import refundPopup from './popup/refund/refund.vue';
|
import refundPopup from './popup/refund/refund.vue';
|
||||||
import afterSalePopup from './popup/afterSale/index.vue';
|
import afterSalePopup from './popup/afterSale/index.vue';
|
||||||
import orderMockData from "./orderMockData.json";
|
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -141,30 +144,46 @@ export default {
|
|||||||
categoryList: [
|
categoryList: [
|
||||||
{ category_name: "全部" },
|
{ category_name: "全部" },
|
||||||
{ category_name: "待付款" },
|
{ category_name: "待付款" },
|
||||||
{ category_name: "已取消" },
|
|
||||||
{ category_name: "待发货" },
|
{ category_name: "待发货" },
|
||||||
{ category_name: "配送中" },
|
{ category_name: "配送中" },
|
||||||
{ category_name: "已完成" },
|
{ category_name: "已完成" },
|
||||||
|
{ category_name: "已取消" },
|
||||||
{ category_name: "待评价" },
|
{ category_name: "待评价" },
|
||||||
{ category_name: "已评价" },
|
{ category_name: "已评价" },
|
||||||
{ category_name: "售后" },
|
{ category_name: "售后" },
|
||||||
],
|
],
|
||||||
selectedTab: 0,
|
selectedTab: 0,
|
||||||
orderData: orderMockData,
|
// orderData: orderMockData,
|
||||||
|
orderData: [],
|
||||||
|
|
||||||
showPopup: false,//取消订单
|
showPopup: false,//取消订单
|
||||||
afterSaleGoods: [],//售后商品列表
|
afterSaleGoods: [],//售后商品列表
|
||||||
|
afterSaleOrderItem: {},//售后订单对象
|
||||||
noSalePopup: false,//无售后商品
|
noSalePopup: false,//无售后商品
|
||||||
showTkPopup: false,//申请退款
|
showTkPopup: false,//申请退款
|
||||||
afterSaleItem: '',//操作对象
|
afterSaleItem: '',//操作对象
|
||||||
|
afterSaleList: [],//售后列表
|
||||||
|
selectStatus: '',//选中的status
|
||||||
|
evaluateStatus: '',//评价状态
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
selectTab(index, item) {
|
selectTab(index, item) {
|
||||||
this.selectedTab = index;
|
this.selectedTab = index;
|
||||||
if (index !== 6) {
|
if (index == 6) {
|
||||||
this.getOrderList();
|
this.evaluateStatus = 2;
|
||||||
|
this.selectStatus = ''
|
||||||
|
} else if (index == 7) {
|
||||||
|
this.evaluateStatus = 1;
|
||||||
|
this.selectStatus = ''
|
||||||
|
} else if (index == 2) {
|
||||||
|
this.selectStatus = 3;
|
||||||
|
this.evaluateStatus = ''
|
||||||
|
} else {
|
||||||
|
this.selectStatus = index > 2 ? index + 1 : index;
|
||||||
|
this.evaluateStatus = ''
|
||||||
}
|
}
|
||||||
|
this.getOrderList();
|
||||||
},
|
},
|
||||||
// 取消订单
|
// 取消订单
|
||||||
cancelOrder(item) {
|
cancelOrder(item) {
|
||||||
@ -174,14 +193,13 @@ export default {
|
|||||||
|
|
||||||
// 处理订单取消事件
|
// 处理订单取消事件
|
||||||
handleOrderCancelled(data) {
|
handleOrderCancelled(data) {
|
||||||
console.log("🚀 ~ handleOrderCancelled ~ 取消原因:", data.reason);
|
|
||||||
const params = {
|
const params = {
|
||||||
order_id: this.afterSaleItem.id,
|
order_id: this.afterSaleItem.id,
|
||||||
method: 1,
|
method: 1,
|
||||||
cancel_reason: data.reason,
|
cancel_reason: data.reason,
|
||||||
}
|
}
|
||||||
request(afterSaleApi.cancelOrConfirm, "POST", params).then((res) => {
|
request(afterSaleApi.cancelOrConfirm, "POST", params).then((res) => {
|
||||||
console.log("🚀 ~ handleOrderCancelled ~ res:", res)
|
this.getOrderList();
|
||||||
});
|
});
|
||||||
|
|
||||||
},
|
},
|
||||||
@ -189,13 +207,15 @@ export default {
|
|||||||
// 售后按钮
|
// 售后按钮
|
||||||
afterSale(item) {
|
afterSale(item) {
|
||||||
this.afterSaleGoods = item.commodity_order_item_list;
|
this.afterSaleGoods = item.commodity_order_item_list;
|
||||||
|
// 保存完整的订单对象
|
||||||
|
this.afterSaleOrderItem = item;
|
||||||
this.$refs.afterSalePopupRef.openAfterSalePopup();
|
this.$refs.afterSalePopupRef.openAfterSalePopup();
|
||||||
|
console.log(item.id);
|
||||||
|
|
||||||
// // 根据条件判断是否可以售后
|
// 根据条件判断是否可以售后
|
||||||
// request(afterSaleApi.isAllow, "POST", {
|
// request(afterSaleApi.isAllow, "POST", {
|
||||||
// order_id: item.id,
|
// order_id: item.id,
|
||||||
// }).then((res) => {
|
// }).then((res) => {
|
||||||
// console.log("🚀 ~ afterSale ~ res:", res)
|
|
||||||
// if (res.data.is_allow_after_sales) {
|
// if (res.data.is_allow_after_sales) {
|
||||||
// this.afterSaleGoods = res.data.allow_items;
|
// this.afterSaleGoods = res.data.allow_items;
|
||||||
// // this.selectedAsGood = item.commodity_order_item_list[0].id;
|
// // this.selectedAsGood = item.commodity_order_item_list[0].id;
|
||||||
@ -208,7 +228,24 @@ export default {
|
|||||||
|
|
||||||
// 处理退款提交事件
|
// 处理退款提交事件
|
||||||
handleRefundSubmitted(data) {
|
handleRefundSubmitted(data) {
|
||||||
console.log("🚀 ~ handleRefundSubmitted ~ 退款申请提交成功:", data);
|
const params = {
|
||||||
|
nick_name: uni.getStorageSync("nickName"),
|
||||||
|
order_id: this.afterSaleOrderItem.id,
|
||||||
|
goods_ids: this.afterSaleOrderItem.commodity_order_item_list.map(item => item.goods_id),
|
||||||
|
after_sales_type: data.afterSalesType,
|
||||||
|
after_sales_reason: data.refundReason,
|
||||||
|
refund_amount: data.refundAmount,
|
||||||
|
application_description: data.refundDescription,
|
||||||
|
// 将图片对象数组转换为字符串数组,多个URL用逗号分隔
|
||||||
|
application_images: data.imgList && data.imgList.length > 0 ?
|
||||||
|
data.imgList.map(img => img.url).join(',') : '',
|
||||||
|
order_status: 5,
|
||||||
|
receiving_address: data.merchantAddress,
|
||||||
|
change_goods_id: data.changeServiceId
|
||||||
|
}
|
||||||
|
request(afterSaleApi.afterSaleCreate, "POST", params).then((res) => {
|
||||||
|
this.getOrderList();
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
@ -218,21 +255,19 @@ export default {
|
|||||||
this.showTkPopup = true
|
this.showTkPopup = true
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 查看物流
|
||||||
|
viewLogistics(item) {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
// 处理退款确认事件
|
// 处理退款确认事件
|
||||||
handleRefundConfirmed(data) {
|
handleRefundConfirmed(data) {
|
||||||
console.log("🚀 ~ handleRefundConfirmed ~ handleRefundConfirmed:", this.afterSaleItem)
|
|
||||||
console.log("🚀 ~ handleRefundConfirmed ~ 退款原因:", data.reason);
|
|
||||||
const params = {
|
const params = {
|
||||||
nick_name: uni.getStorageSync("nickName"),
|
|
||||||
order_id: this.afterSaleItem.id,
|
order_id: this.afterSaleItem.id,
|
||||||
after_sales_type: 1,
|
|
||||||
after_sales_reason: data.reason,
|
|
||||||
refund_amount: this.afterSaleItem.total_amount,
|
|
||||||
order_status: 3
|
|
||||||
}
|
}
|
||||||
console.log("🚀 ~ handleRefundConfirmed ~ parasm:", params)
|
request(afterSaleApi.orderRefund, "POST", params).then((res) => {
|
||||||
request(afterSaleApi.afterSaleCreate, "POST", params).then((res) => {
|
uni.showToast({ title: "退款成功", icon: "none" });
|
||||||
console.log("🚀 ~ handleRefundConfirmed ~ res:", res)
|
this.getOrderList();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -247,15 +282,53 @@ export default {
|
|||||||
order_id: item.id,
|
order_id: item.id,
|
||||||
method: 2,
|
method: 2,
|
||||||
}
|
}
|
||||||
console.log("🚀 ~ confirmReceiving ~ params:", params)
|
|
||||||
request(afterSaleApi.cancelOrConfirm, "POST", params).then((res) => {
|
request(afterSaleApi.cancelOrConfirm, "POST", params).then((res) => {
|
||||||
console.log("🚀 ~ handleRefundConfirmed ~ res:", res)
|
this.getOrderList();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
goToPay() {
|
goToPay(item) {
|
||||||
|
// 创建转换后的商品数组
|
||||||
|
const transformedItems = item.commodity_order_item_list.map(goods => ({
|
||||||
|
isafterSale: true,
|
||||||
|
orderId: item.id,
|
||||||
|
commodity_goods_info: {
|
||||||
|
commodity_brief: "",
|
||||||
|
commodity_id: goods.commodity_id,
|
||||||
|
commodity_pic: goods.commodity_pic,
|
||||||
|
goods_alias: goods.goods_name,
|
||||||
|
goods_carousel: "",
|
||||||
|
goods_detail_pic: "",
|
||||||
|
goods_intro: goods.goods_name,
|
||||||
|
goods_name: goods.goods_name,
|
||||||
|
goods_no: "",
|
||||||
|
goods_spec: goods.goods_spec,
|
||||||
|
goods_status: 1,
|
||||||
|
goods_unit: goods.goods_unit,
|
||||||
|
goods_video: "",
|
||||||
|
group_buy_activity_info: null,
|
||||||
|
id: goods.id,
|
||||||
|
is_same_day: goods.is_same_day || false,
|
||||||
|
is_support_same_day: goods.is_support_same_day || 2,
|
||||||
|
market_price: goods.sales_price,
|
||||||
|
sales_price: goods.sales_price,
|
||||||
|
stock_quantity: goods.stock_quantity
|
||||||
|
},
|
||||||
|
commodity_id: goods.commodity_id,
|
||||||
|
count: goods.count,
|
||||||
|
create_time: item.create_time,
|
||||||
|
goods_id: goods.goods_id,
|
||||||
|
group_buy_id: 0,
|
||||||
|
id: goods.id,
|
||||||
|
supplier_id: item.supplier_id,
|
||||||
|
supplier_name: item.supplier_name,
|
||||||
|
update_time: item.update_time,
|
||||||
|
user_id: item.user_id
|
||||||
|
}));
|
||||||
|
|
||||||
|
NavgateTo(`/packages/shop/groupPurchaseSubmit/index?shopCarList=${JSON.stringify(transformedItems)}`)
|
||||||
},
|
},
|
||||||
toDetails(item) {
|
toDetails(item) {
|
||||||
NavgateTo(
|
NavgateTo(
|
||||||
@ -267,8 +340,8 @@ export default {
|
|||||||
NavgateTo(`/packages/myOrders/logistics/index`);
|
NavgateTo(`/packages/myOrders/logistics/index`);
|
||||||
},
|
},
|
||||||
|
|
||||||
orderEvaluate() {
|
orderEvaluate(item) {
|
||||||
NavgateTo(`/packages/myOrders/orderEvaluate/index`);
|
NavgateTo(`/packages/myOrders/orderEvaluate/index?item=${JSON.stringify(item)}`);
|
||||||
},
|
},
|
||||||
|
|
||||||
getOrderStatus(order_status) {
|
getOrderStatus(order_status) {
|
||||||
@ -293,17 +366,49 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
getOrderList() {
|
getOrderList() {
|
||||||
request(apiArr.orderList, "POST", {
|
this.orderData = []
|
||||||
|
request(afterSaleApi.orderList, "POST", {
|
||||||
|
order_status: this.selectStatus,
|
||||||
|
evaluate_status: this.evaluateStatus,
|
||||||
user_id: uni.getStorageSync("userId"),
|
user_id: uni.getStorageSync("userId"),
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
//
|
res.order_list?.forEach(item => {
|
||||||
|
item.commodity_order_item_list?.forEach(good => {
|
||||||
|
good.commodity_pic = picUrl + good.commodity_pic;
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.orderData = res.order_list.filter(item => item.order_cate == 1);
|
||||||
|
this.getAfterSaleList();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
getAfterSaleList() {
|
||||||
|
const params = {
|
||||||
|
user_id: uni.getStorageSync('userId'),
|
||||||
|
order_cate: 1,
|
||||||
|
}
|
||||||
|
request(afterSaleApi.afterSalesList, "POST", params).then((res) => {
|
||||||
|
res.after_sales_list?.forEach(item => {
|
||||||
|
item.commodity_order_item?.forEach(good => {
|
||||||
|
good.commodity_pic = picUrl + good.commodity_pic;
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.afterSaleList = res.after_sales_list;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理订单撤销成功事件
|
||||||
|
revokeApply() {
|
||||||
|
this.getOrderList();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
this.getOrderList();
|
this.getOrderList();
|
||||||
},
|
},
|
||||||
|
onShow() {
|
||||||
|
this.getOrderList();
|
||||||
|
uni.removeStorageSync('afterSaleItem')
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
@ -1,167 +0,0 @@
|
|||||||
[
|
|
||||||
{
|
|
||||||
"id": 1001,
|
|
||||||
"user_id": 2001,
|
|
||||||
"supplier_id": 3001,
|
|
||||||
"supplier_name": "生鲜优选",
|
|
||||||
"order_group_id": 5001,
|
|
||||||
"order_no": "DD202508131001",
|
|
||||||
"total_amount": 88.50,
|
|
||||||
"total_count": 3,
|
|
||||||
"order_status": 1,
|
|
||||||
"evauate_status": 2,
|
|
||||||
"after_sales_status": 2,
|
|
||||||
"receiving_name": "张三",
|
|
||||||
"receiving_phone": "13800138001",
|
|
||||||
"receiving_address": "北京市朝阳区科技园A座101",
|
|
||||||
"pay_method": "微信支付",
|
|
||||||
"payment_amount": 0,
|
|
||||||
"payment_status": "未支付",
|
|
||||||
"payment_serial": "",
|
|
||||||
"payer_name": "",
|
|
||||||
"order_time": "2025-08-13T10:30:00Z",
|
|
||||||
"is_same_day": 1,
|
|
||||||
"estimated_delivery_time": "今日14:00-16:00",
|
|
||||||
"remark": "请尽快配送",
|
|
||||||
"shiliu_score": 88.5,
|
|
||||||
"shiliu_seed": 22.1,
|
|
||||||
"timeout_time_stamp": 1755086400,
|
|
||||||
"commodity_order_item_list": [
|
|
||||||
{
|
|
||||||
"id": 7001,
|
|
||||||
"order_id": 1001,
|
|
||||||
"goods_id": 8001,
|
|
||||||
"goods_name": "澳洲牛排",
|
|
||||||
"commodity_pic": "http://localhost:8080/test.png",
|
|
||||||
"goods_unit": "盒",
|
|
||||||
"goods_spec": "200g/盒",
|
|
||||||
"cost_price": 45.0,
|
|
||||||
"sales_price": 68.0,
|
|
||||||
"count": 1,
|
|
||||||
"is_support_same_day": 1,
|
|
||||||
"is_same_day": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 7002,
|
|
||||||
"goods_id": 8002,
|
|
||||||
"goods_name": "有机西兰花",
|
|
||||||
"commodity_pic": "http://localhost:8080/test.png",
|
|
||||||
"goods_unit": "份",
|
|
||||||
"goods_spec": "500g/份",
|
|
||||||
"cost_price": 8.0,
|
|
||||||
"sales_price": 10.5,
|
|
||||||
"count": 2,
|
|
||||||
"is_support_same_day": 1,
|
|
||||||
"is_same_day": true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 1002,
|
|
||||||
"order_no": "DD202508131002",
|
|
||||||
"total_amount": 152.0,
|
|
||||||
"total_count": 5,
|
|
||||||
"order_status": 2,
|
|
||||||
"payment_status": "支付中",
|
|
||||||
"payment_time": "2025-08-13T10:35:22Z",
|
|
||||||
"payer_name": "李四",
|
|
||||||
"order_time": "2025-08-13T10:32:15Z",
|
|
||||||
"commodity_order_item_list": [
|
|
||||||
{
|
|
||||||
"id": 7003,
|
|
||||||
"goods_id": 8003,
|
|
||||||
"goods_name": "精品榴莲",
|
|
||||||
"commodity_pic": "http://localhost:8080/test.png",
|
|
||||||
"sales_price": 152.0,
|
|
||||||
"count": 1,
|
|
||||||
"is_support_same_day": 1,
|
|
||||||
"is_same_day": false
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 1003,
|
|
||||||
"order_no": "DD202508131003",
|
|
||||||
"total_amount": 45.8,
|
|
||||||
"order_status": 3,
|
|
||||||
"payment_status": "已支付",
|
|
||||||
"payment_amount": 45.8,
|
|
||||||
"payment_serial": "PY20250813100003",
|
|
||||||
"order_time": "2025-08-13T09:15:30Z",
|
|
||||||
"is_same_day": 2,
|
|
||||||
"commodity_order_item_list": [
|
|
||||||
{
|
|
||||||
"id": 7004,
|
|
||||||
"goods_name": "东北大米",
|
|
||||||
"count": 2,
|
|
||||||
"sales_price": 22.9
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 1004,
|
|
||||||
"order_no": "DD202508131004",
|
|
||||||
"order_status": 4,
|
|
||||||
"receiving_name": "王五",
|
|
||||||
"receiving_phone": "13900139000",
|
|
||||||
"payment_serial": "PY20250813090001",
|
|
||||||
"order_time": "2025-08-13T08:45:00Z",
|
|
||||||
"is_same_day": 1,
|
|
||||||
"commodity_order_item_list": [
|
|
||||||
{
|
|
||||||
"id": 7005,
|
|
||||||
"goods_name": "酸奶套装",
|
|
||||||
"count": 1,
|
|
||||||
"sales_price": 39.9
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 1005,
|
|
||||||
"order_no": "DD202508131005",
|
|
||||||
"order_status": 5,
|
|
||||||
"evauate_status": 2,
|
|
||||||
"payment_status": "已支付",
|
|
||||||
"completed_at": "2025-08-13T15:20:18Z",
|
|
||||||
"order_time": "2025-08-13T11:20:18Z",
|
|
||||||
"commodity_order_item_list": [
|
|
||||||
{
|
|
||||||
"id": 7003,
|
|
||||||
"goods_id": 8003,
|
|
||||||
"goods_name": "冷冻虾仁",
|
|
||||||
"commodity_pic": "http://localhost:8080/test.png",
|
|
||||||
"sales_price": 152.0,
|
|
||||||
"count": 3,
|
|
||||||
"is_support_same_day": 1,
|
|
||||||
"is_same_day": false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 7004,
|
|
||||||
"goods_id": 8004,
|
|
||||||
"goods_name": "精品榴莲",
|
|
||||||
"commodity_pic": "http://localhost:8080/test.png",
|
|
||||||
"sales_price": 152.0,
|
|
||||||
"count": 1,
|
|
||||||
"is_support_same_day": 2,
|
|
||||||
"is_same_day": false
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 1006,
|
|
||||||
"order_no": "DD202508131006",
|
|
||||||
"order_status": 6,
|
|
||||||
"cancelled_by": "user",
|
|
||||||
"cancel_time": "2025-08-13T10:40:05Z",
|
|
||||||
"cancel_reason": "选错商品",
|
|
||||||
"order_time": "2025-08-13T10:38:12Z",
|
|
||||||
"commodity_order_item_list": [
|
|
||||||
{
|
|
||||||
"id": 7007,
|
|
||||||
"goods_name": "进口橙子",
|
|
||||||
"count": 2,
|
|
||||||
"sales_price": 32.0
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
@ -427,7 +427,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.itemSize {
|
.itemSize {
|
||||||
width: 30%;
|
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
color: #333;
|
color: #333;
|
||||||
background: #F6F7FB;
|
background: #F6F7FB;
|
||||||
@ -447,7 +446,6 @@
|
|||||||
height: 100rpx;
|
height: 100rpx;
|
||||||
margin-right: 30rpx;
|
margin-right: 30rpx;
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
border:1rpx solid red;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemSize_top{
|
.itemSize_top{
|
||||||
|
|||||||
@ -19,13 +19,14 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="asGoodsInfo" v-for="(item, index) in afterSaleGoods" :key="index">
|
<view class="asGoodsInfo" v-for="(item, index) in afterSaleGoods" :key="index">
|
||||||
<view class="asGoodInfo" @click="selectAsGood(item)">
|
<view class="asGoodInfo" @click="selectAsGood(item)">
|
||||||
<view :class="['radio asGoodRadio', selectedAsGood == item.id ? 'active' : '']"></view>
|
<view :class="['radio asGoodRadio', selectedAsGood == item.goods_id ? 'active' : '']">
|
||||||
|
</view>
|
||||||
<view class="asGoodTag tag-img" v-if="item.is_support_same_day === 1">当日达</view>
|
<view class="asGoodTag tag-img" v-if="item.is_support_same_day === 1">当日达</view>
|
||||||
<image :src="item.commodity_pic" class="asGoodImg"></image>
|
<image :src="item.commodity_pic" class="asGoodImg"></image>
|
||||||
<view class="asGoodDetail">
|
<view class="asGoodDetail">
|
||||||
<view class="asGoodTitle">
|
<view class="asGoodTitle">
|
||||||
<text class="asGoodTag asGoodTag1" v-if="item.is_support_same_day === 1">当日达</text>
|
<text class="asGoodTag asGoodTag1" v-if="item.is_support_same_day === 1">当日达</text>
|
||||||
{{ item.goods_name}}
|
{{ item.goods_name }}
|
||||||
</view>
|
</view>
|
||||||
<view class="asGoodDesc">{{ item.goods_spec }}</view>
|
<view class="asGoodDesc">{{ item.goods_spec }}</view>
|
||||||
<view class="asGoodPrice">¥{{ item.cost_price }}/个</view>
|
<view class="asGoodPrice">¥{{ item.cost_price }}/个</view>
|
||||||
@ -50,7 +51,7 @@
|
|||||||
@click="selectAfterSaleType2(0)">
|
@click="selectAfterSaleType2(0)">
|
||||||
退货退款</view>
|
退货退款</view>
|
||||||
<view :class="['asTab2', selectedAfterSaleType2 === 1 ? 'active' : '']"
|
<view :class="['asTab2', selectedAfterSaleType2 === 1 ? 'active' : '']"
|
||||||
@click="selectAfterSaleType2(1)">退货
|
@click="selectAfterSaleType2(1)">退款
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="reason-list" v-if="selectedAfterSaleType2 === 0">
|
<view class="reason-list" v-if="selectedAfterSaleType2 === 0">
|
||||||
@ -79,7 +80,6 @@
|
|||||||
<view class="refund-title">确认退款信息</view>
|
<view class="refund-title">确认退款信息</view>
|
||||||
<view class="refund-item">
|
<view class="refund-item">
|
||||||
<view class="refund-label">服务类型<text class="required">*</text></view>
|
<view class="refund-label">服务类型<text class="required">*</text></view>
|
||||||
|
|
||||||
<view class="refund-value" @click="openAfterSalePopup2('serviceType')">
|
<view class="refund-value" @click="openAfterSalePopup2('serviceType')">
|
||||||
{{ selectedServiceType || '请选择服务类型' }}
|
{{ selectedServiceType || '请选择服务类型' }}
|
||||||
<text class="arrow-right"></text>
|
<text class="arrow-right"></text>
|
||||||
@ -173,20 +173,21 @@
|
|||||||
<view class="refund-item">
|
<view class="refund-item">
|
||||||
<view class="refund-label">换货商品<text class="required">*</text></view>
|
<view class="refund-label">换货商品<text class="required">*</text></view>
|
||||||
<view class="refund-value" @click="changeGood()">
|
<view class="refund-value" @click="changeGood()">
|
||||||
{{ changeServiceType || '请选择需要换的商品' }}
|
{{ changeServiceName || '请选择需要换的商品' }}
|
||||||
<text class="arrow-right"></text>
|
<text class="arrow-right"></text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="text-wrapper_8">
|
<view class="text-wrapper_8">
|
||||||
<text class="text_41">高尚</text>
|
<text class="text_41">{{ orderItem.receiving_name }}</text>
|
||||||
<text class="text_42">15901518415</text>
|
<text class="text_42">{{ orderItem.receiving_phone }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="block_15">
|
<view class="block_15">
|
||||||
<view class="address-view">
|
<view class="address-view">
|
||||||
<text> {{ merchantAddress }} </text>
|
<text> {{ orderItem.receiving_address }} </text>
|
||||||
<view class="copy-icon" @click="copyRefundNo"></view>
|
<view class="copy-icon" @click="copyRefundNo"></view>
|
||||||
</view>
|
</view>
|
||||||
<image src="http://localhost:8080/af_update_address.png" class="icon_2"></image>
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/af_update_address.png"
|
||||||
|
class="icon_2"></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="hr"></view>
|
<view class="hr"></view>
|
||||||
<view class="refund-item2">
|
<view class="refund-item2">
|
||||||
@ -215,13 +216,14 @@
|
|||||||
<view class="popup-header-view" @click="closeSize">取消</view>
|
<view class="popup-header-view" @click="closeSize">取消</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="itemSize_top">
|
<view class="itemSize_top">
|
||||||
<image :src="changeImg" class="itemSize-img"></image>
|
<image :src="currentGG.commodity_pic" class="itemSize-img"></image>
|
||||||
<view class="itemSize_info">
|
<view class="itemSize_info">
|
||||||
<view class="itemSize_name">{{ changeName }}</view>
|
<view class="itemSize_name">{{ currentGG.goods_name }}</view>
|
||||||
<view class="itemSize_price">¥{{ changePrice }}/袋</view>
|
<view class="itemSize_price">¥{{ currentGG.sales_price }}/{{ currentGG.goods_unit }}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="itemSize" v-for="(item, index) in info.commodity_goods_info_list" :key="item.id"
|
</view>
|
||||||
|
<view class="itemSize" v-for="(item, index) in changeGoodsList" :key="item.id"
|
||||||
@click="changeGG(item, index)" :class="index == currentGGIndex ? 'itemSize_active' : ''">
|
@click="changeGG(item, index)" :class="index == currentGGIndex ? 'itemSize_active' : ''">
|
||||||
{{ item.goods_name }} {{ item.goods_spec }} / {{ item.goods_unit }}
|
{{ item.goods_name }} {{ item.goods_spec }} / {{ item.goods_unit }}
|
||||||
</view>
|
</view>
|
||||||
@ -230,11 +232,23 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { upload, picUrl } from '../../../../../utils';
|
|
||||||
|
import {
|
||||||
|
isPhone,
|
||||||
|
picUrl,
|
||||||
|
request,
|
||||||
|
upload,
|
||||||
|
NavgateTo
|
||||||
|
} from '../../../../../utils';
|
||||||
|
import { apiArr } from "../../../../../api/afterSale";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AfterSalePopup',
|
name: 'AfterSalePopup',
|
||||||
props: {
|
props: {
|
||||||
|
orderItem: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
afterSaleGoods: {
|
afterSaleGoods: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => []
|
default: () => []
|
||||||
@ -247,26 +261,29 @@ export default {
|
|||||||
afterSalePopup3: false,
|
afterSalePopup3: false,
|
||||||
selectedAsGood: '',
|
selectedAsGood: '',
|
||||||
selectedAfterSaleType: 0, // 0:退货/退款, 1:换货
|
selectedAfterSaleType: 0, // 0:退货/退款, 1:换货
|
||||||
selectedAfterSaleType2: 0, // 0:退货/退款, 1:退货
|
selectedAfterSaleType2: 0, // 0:退货/退款, 1:退款
|
||||||
selectedAsReason: 0,
|
selectedAsReason: 0,
|
||||||
selectedReason: 0,//换货原因
|
selectedReason: 0,//换货原因
|
||||||
selectedServiceType: '',
|
selectedServiceType: '',
|
||||||
selectedRefundReason: '',
|
selectedRefundReason: '',
|
||||||
changeRefundReason: '', // 换货原因回显
|
changeRefundReason: '', // 换货原因回显
|
||||||
changeServiceType: '', // 换货商品回显
|
changeServiceName: '', // 换货商品回显
|
||||||
|
changeServiceId: '', // 换货商品id
|
||||||
|
changeGoodsList: [], // 换货商品列表
|
||||||
showSize: false,//选择款式弹窗
|
showSize: false,//选择款式弹窗
|
||||||
changeImg: "",
|
currentGG: {},//当前选择的款式
|
||||||
changeName: "",
|
currentGGIndex: 0,
|
||||||
changePrice: "",
|
afterSalesType: 2, // 服务类型 1:仅退款 2:退货退款 3:换货
|
||||||
|
|
||||||
|
merchantContact: '', // 商家信息
|
||||||
|
merchantAddress: '', // 商家地址
|
||||||
|
|
||||||
refundAmount: 0,
|
|
||||||
maxRefundAmount: 0,
|
|
||||||
postage: 0,
|
|
||||||
refundDescription: '',
|
refundDescription: '',
|
||||||
refundMethod: '自行寄回',
|
refundMethod: '自行寄回',
|
||||||
merchantAddress: '衡水市路北街道中心北大街世纪名城41号楼',
|
|
||||||
merchantContact: '高尚 18032753127',
|
|
||||||
imgList: [],
|
imgList: [],
|
||||||
|
refundAmount: 0, // 当前退款金额
|
||||||
|
maxRefundAmount: 0, // 最大可退款金额
|
||||||
|
postage: 0, // 邮费金额
|
||||||
applyRefundReasons: [
|
applyRefundReasons: [
|
||||||
'商品质量问题',
|
'商品质量问题',
|
||||||
'商品与描述不符',
|
'商品与描述不符',
|
||||||
@ -294,7 +311,9 @@ export default {
|
|||||||
openAfterSalePopup() {
|
openAfterSalePopup() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
if (this.afterSaleGoods && this.afterSaleGoods.length > 0) {
|
if (this.afterSaleGoods && this.afterSaleGoods.length > 0) {
|
||||||
this.selectedAsGood = this.afterSaleGoods[0].id;
|
this.selectedAsGood = this.afterSaleGoods[0].goods_id;
|
||||||
|
this.afterSalesType = 2
|
||||||
|
this.selectedAfterSaleType = 0;
|
||||||
this.afterSalePopup = true;
|
this.afterSalePopup = true;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@ -302,7 +321,7 @@ export default {
|
|||||||
|
|
||||||
// 选择售后商品
|
// 选择售后商品
|
||||||
selectAsGood(item) {
|
selectAsGood(item) {
|
||||||
this.selectedAsGood = item.id;
|
this.selectedAsGood = item.goods_id;
|
||||||
},
|
},
|
||||||
|
|
||||||
// 关闭弹窗
|
// 关闭弹窗
|
||||||
@ -328,10 +347,18 @@ export default {
|
|||||||
|
|
||||||
// 选择售后类型
|
// 选择售后类型
|
||||||
selectAfterSaleType(index) {
|
selectAfterSaleType(index) {
|
||||||
|
if (index === 1) {
|
||||||
|
this.afterSalesType = 3;
|
||||||
|
}
|
||||||
this.selectedAfterSaleType = index;
|
this.selectedAfterSaleType = index;
|
||||||
},
|
},
|
||||||
|
|
||||||
selectAfterSaleType2(index) {
|
selectAfterSaleType2(index) {
|
||||||
|
if(index === 1) {
|
||||||
|
this.afterSalesType = 1;
|
||||||
|
}else{
|
||||||
|
this.afterSalesType = 2;
|
||||||
|
}
|
||||||
this.selectedAfterSaleType2 = index;
|
this.selectedAfterSaleType2 = index;
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -342,6 +369,9 @@ export default {
|
|||||||
console.log('售后商品 - 选中的售后类型:', selectedType);
|
console.log('售后商品 - 选中的售后类型:', selectedType);
|
||||||
console.log('选中的售后商品:', this.selectedAsGood);
|
console.log('选中的售后商品:', this.selectedAsGood);
|
||||||
|
|
||||||
|
this.merchantContact = `${this.orderItem.supplier_name} ${this.orderItem.supplier_phone}`;
|
||||||
|
this.merchantAddress = this.orderItem.supplier_address;
|
||||||
|
|
||||||
this.afterSalePopup = false;
|
this.afterSalePopup = false;
|
||||||
this.afterSalePopup2 = true;
|
this.afterSalePopup2 = true;
|
||||||
},
|
},
|
||||||
@ -376,13 +406,18 @@ export default {
|
|||||||
}
|
}
|
||||||
this.afterSalePopup2 = false;
|
this.afterSalePopup2 = false;
|
||||||
},
|
},
|
||||||
|
// 确认退款信息
|
||||||
// 确认退款原因选择
|
|
||||||
confirmAfterSaleCancel2() {
|
confirmAfterSaleCancel2() {
|
||||||
const afterSaleTypes = ['退货退款', '退货'];
|
const afterSaleTypes = ['退货退款', '退款'];
|
||||||
const selectedType = afterSaleTypes[this.selectedAfterSaleType2];
|
const selectedType = afterSaleTypes[this.selectedAfterSaleType2];
|
||||||
console.log('选中的售后类型:', selectedType);
|
console.log('选中的售后类型:', selectedType);
|
||||||
|
|
||||||
|
// 设置默认退款金额和最大退款金额
|
||||||
|
this.refundAmount = this.orderItem.total_amount;
|
||||||
|
this.maxRefundAmount = this.orderItem.total_amount;
|
||||||
|
// 从订单信息中获取邮费(如果有的话)
|
||||||
|
this.postage = this.orderItem.postage || 0;
|
||||||
|
|
||||||
let selectedReasonText = '';
|
let selectedReasonText = '';
|
||||||
if (selectedType == '退货退款') {
|
if (selectedType == '退货退款') {
|
||||||
selectedReasonText = this.applyRefundReasons[this.selectedAsReason];
|
selectedReasonText = this.applyRefundReasons[this.selectedAsReason];
|
||||||
@ -394,10 +429,6 @@ export default {
|
|||||||
// 设置选中的服务类型和退款原因
|
// 设置选中的服务类型和退款原因
|
||||||
this.selectedServiceType = selectedType;
|
this.selectedServiceType = selectedType;
|
||||||
this.selectedRefundReason = selectedReasonText;
|
this.selectedRefundReason = selectedReasonText;
|
||||||
// 模拟退款金额数据
|
|
||||||
this.refundAmount = 4704.00;
|
|
||||||
this.maxRefundAmount = 53.80;
|
|
||||||
this.postage = 0.00;
|
|
||||||
|
|
||||||
this.selectAsReason(0);
|
this.selectAsReason(0);
|
||||||
this.afterSalePopup2 = false;
|
this.afterSalePopup2 = false;
|
||||||
@ -412,8 +443,25 @@ export default {
|
|||||||
|
|
||||||
// 选择换货商品
|
// 选择换货商品
|
||||||
changeGood() {
|
changeGood() {
|
||||||
|
const params = {
|
||||||
|
goods_id: this.selectedAsGood,
|
||||||
|
}
|
||||||
|
request(apiArr.changeGoodsList, "POST", params).then((res) => {
|
||||||
|
res.change_goods_list.forEach(item => {
|
||||||
|
item.commodity_pic = picUrl + item.commodity_pic;
|
||||||
|
})
|
||||||
|
this.changeGoodsList = res.change_goods_list;
|
||||||
|
console.log("🚀 ~ changeGood ~ this.currentGG:", this.currentGG)
|
||||||
|
if (!this.currentGG.goods_name) {
|
||||||
|
this.currentGG = this.changeGoodsList.find(item => item.id == this.selectedAsGood);
|
||||||
|
this.currentGGIndex = this.changeGoodsList.indexOf(this.currentGG);
|
||||||
|
this.changeServiceName = this.currentGG.goods_name
|
||||||
|
this.changeServiceId = this.currentGG.id
|
||||||
|
}
|
||||||
|
|
||||||
this.afterSalePopup3 = false;
|
this.afterSalePopup3 = false;
|
||||||
this.showSize = true;
|
this.showSize = true;
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
closeSize() {
|
closeSize() {
|
||||||
@ -422,17 +470,10 @@ export default {
|
|||||||
|
|
||||||
// 切换规格
|
// 切换规格
|
||||||
changeGG(item, index) {
|
changeGG(item, index) {
|
||||||
console.log("🚀 ~ changeGG ~ item:", item);
|
|
||||||
this.currentGG = item;
|
this.currentGG = item;
|
||||||
this.currentGGIndex = index;
|
this.currentGGIndex = index;
|
||||||
if (this.currentGG.cart_count) {
|
this.changeServiceName = this.currentGG.goods_name
|
||||||
this.currentNum = this.currentGG.cart_count.count;
|
this.changeServiceId = this.currentGG.id
|
||||||
} else {
|
|
||||||
this.currentGG.cart_count = { count: 0 };
|
|
||||||
}
|
|
||||||
this.changeImg = item.commodity_pic[0]
|
|
||||||
this.changeName = item.goods_alias
|
|
||||||
this.changePrice = item.sales_price
|
|
||||||
|
|
||||||
this.afterSalePopup3 = true;
|
this.afterSalePopup3 = true;
|
||||||
this.showSize = false;
|
this.showSize = false;
|
||||||
@ -455,7 +496,50 @@ export default {
|
|||||||
|
|
||||||
// 修改退款金额
|
// 修改退款金额
|
||||||
modifyRefundAmount() {
|
modifyRefundAmount() {
|
||||||
console.log('修改退款金额');
|
const that = this;
|
||||||
|
// 打开输入对话框
|
||||||
|
uni.showModal({
|
||||||
|
title: '修改退款金额',
|
||||||
|
editable: true,
|
||||||
|
placeholderText: `请输入不超过¥${this.maxRefundAmount.toFixed(2)}的金额`,
|
||||||
|
success: function (res) {
|
||||||
|
if (res.confirm && res.content) {
|
||||||
|
let inputAmount = parseFloat(res.content);
|
||||||
|
|
||||||
|
// 检查输入是否为有效数字
|
||||||
|
if (isNaN(inputAmount) || inputAmount <= 0) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入有效的金额',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 限制为两位小数
|
||||||
|
inputAmount = Math.round(inputAmount * 100) / 100;
|
||||||
|
|
||||||
|
// 检查是否超过最大退款金额
|
||||||
|
if (inputAmount > that.maxRefundAmount) {
|
||||||
|
uni.showToast({
|
||||||
|
title: `退款金额不能超过¥${that.maxRefundAmount.toFixed(2)}`,
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新退款金额
|
||||||
|
that.refundAmount = inputAmount;
|
||||||
|
|
||||||
|
// 通知父组件退款金额已修改
|
||||||
|
that.$emit('refundAmountChanged', that.refundAmount);
|
||||||
|
|
||||||
|
uni.showToast({
|
||||||
|
title: '退款金额修改成功',
|
||||||
|
icon: 'success'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
// 查看地址详情
|
// 查看地址详情
|
||||||
@ -465,6 +549,7 @@ export default {
|
|||||||
|
|
||||||
// 提交退款申请
|
// 提交退款申请
|
||||||
submitRefundApplication() {
|
submitRefundApplication() {
|
||||||
|
if(this.afterSalesType !== 3) {
|
||||||
if (!this.selectedServiceType || !this.selectedRefundReason) {
|
if (!this.selectedServiceType || !this.selectedRefundReason) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '请选择服务类型和退款原因',
|
title: '请选择服务类型和退款原因',
|
||||||
@ -472,26 +557,54 @@ export default {
|
|||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 输出弹窗中的所有内容
|
// 输出弹窗中的所有内容
|
||||||
const refundInfo = {
|
const refundInfo = {
|
||||||
|
afterSalesType: this.afterSalesType,
|
||||||
serviceType: this.selectedServiceType,
|
serviceType: this.selectedServiceType,
|
||||||
refundReason: this.selectedRefundReason,
|
refundReason: this.selectedRefundReason || this.changeRefundReason,
|
||||||
refundAmount: this.refundAmount,
|
refundAmount: this.refundAmount || this.orderItem.total_amount,
|
||||||
maxRefundAmount: this.maxRefundAmount,
|
maxRefundAmount: this.maxRefundAmount || this.orderItem.total_amount,
|
||||||
postage: this.postage,
|
postage: this.postage,
|
||||||
refundDescription: this.refundDescription,
|
refundDescription: this.refundDescription,
|
||||||
refundMethod: this.refundMethod,
|
refundMethod: this.refundMethod,
|
||||||
merchantAddress: this.merchantAddress,
|
merchantAddress: this.orderItem.supplier_address,
|
||||||
merchantContact: this.merchantContact,
|
merchantContact: `${this.orderItem.supplier_name} ${this.orderItem.supplier_phone}`,
|
||||||
imgList: this.imgList
|
imgList: this.imgList,
|
||||||
|
changeServiceId: this.changeServiceId,
|
||||||
};
|
};
|
||||||
console.log('提交退款申请:', refundInfo);
|
console.log('提交退款申请:', refundInfo);
|
||||||
|
|
||||||
this.afterSalePopup3 = false;
|
this.afterSalePopup3 = false;
|
||||||
// 触发父组件事件,传递退款信息
|
// 触发父组件事件,传递退款信息
|
||||||
this.$emit('refundSubmitted', refundInfo);
|
this.$emit('refundSubmitted', refundInfo);
|
||||||
}
|
|
||||||
|
// 重置弹窗中的数据为默认值
|
||||||
|
this.resetAfterSaleData();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 重置售后数据为默认值
|
||||||
|
resetAfterSaleData() {
|
||||||
|
this.selectedAsGood = '';
|
||||||
|
this.selectedAfterSaleType = 0; // 0:退货/退款, 1:换货
|
||||||
|
this.selectedAfterSaleType2 = 0; // 0:退货/退款, 1:退款
|
||||||
|
this.selectedAsReason = 0;
|
||||||
|
this.selectedReason = 0; // 换货原因
|
||||||
|
this.selectedServiceType = '';
|
||||||
|
this.selectedRefundReason = '';
|
||||||
|
this.changeRefundReason = ''; // 换货原因回显
|
||||||
|
this.changeServiceName = ''; // 换货商品回显
|
||||||
|
this.changeServiceId = ''; // 换货商品id
|
||||||
|
this.changeGoodsList = []; // 换货商品列表
|
||||||
|
this.currentGG = {}; // 当前选择的款式
|
||||||
|
this.currentGGIndex = 0;
|
||||||
|
this.refundDescription = '';
|
||||||
|
this.imgList = [];
|
||||||
|
this.refundAmount = 0;
|
||||||
|
this.maxRefundAmount = 0;
|
||||||
|
this.postage = 0;
|
||||||
|
},
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -49,7 +49,6 @@ export default {
|
|||||||
|
|
||||||
confirmCancel() {
|
confirmCancel() {
|
||||||
const selectedText = this.cancelReasons[this.selectedReason];
|
const selectedText = this.cancelReasons[this.selectedReason];
|
||||||
console.log("🚀 ~ confirmCancel ~ 取消原因:", selectedText);
|
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
title: "取消订单",
|
title: "取消订单",
|
||||||
content: "千辛万苦挑选的商品,确定要取消吗?",
|
content: "千辛万苦挑选的商品,确定要取消吗?",
|
||||||
|
|||||||
@ -50,7 +50,6 @@ export default {
|
|||||||
|
|
||||||
confirmRefund() {
|
confirmRefund() {
|
||||||
const selectedText = this.applyRefundReasons[this.selectedReason];
|
const selectedText = this.applyRefundReasons[this.selectedReason];
|
||||||
console.log("🚀 ~ confirmRefund ~ 退款原因:", selectedText);
|
|
||||||
this.$emit('update:showPopup', false);
|
this.$emit('update:showPopup', false);
|
||||||
this.$emit('refundConfirmed', { reason: selectedText });
|
this.$emit('refundConfirmed', { reason: selectedText });
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
|
|||||||
@ -8,12 +8,12 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="status-bar" v-if="status === '3'">
|
<view class="status-bar" v-if="status === '3'">
|
||||||
<view class="status">待发货</view>
|
<view class="status">待发货</view>
|
||||||
<view class="countdown">预计到货时间: 2025-09-09 9:59:59</view>
|
<view class="countdown">预计到货时间: {{ orderInfo.estimated_delivery_time }}</view>
|
||||||
<view class="tips">商家正在加急打包中了,请耐心等候</view>
|
<view class="tips">商家正在加急打包中了,请耐心等候</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="status-bar" v-if="status === '4'">
|
<view class="status-bar" v-if="status === '4'">
|
||||||
<view class="status">待配送</view>
|
<view class="status">待配送</view>
|
||||||
<view class="countdown">预计到货时间: 2025-09-09 9:59:59</view>
|
<view class="countdown">预计到货时间: {{ orderInfo.estimated_delivery_time }}</view>
|
||||||
<view class="tips">
|
<view class="tips">
|
||||||
配送司机:15901518415
|
配送司机:15901518415
|
||||||
<img class="phone" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/phone.png" />
|
<img class="phone" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/phone.png" />
|
||||||
@ -21,13 +21,13 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="status-bar" v-if="status === '5' || status === '退款中'">
|
<view class="status-bar" v-if="status === '5' || status === '退款中'">
|
||||||
<view class="status">已完成</view>
|
<view class="status">已完成</view>
|
||||||
<view class="countdown">预计到货时间: 2025-09-09 9:59:59</view>
|
<view class="countdown">预计到货时间: {{ orderInfo.estimated_delivery_time }}</view>
|
||||||
<view class="tips">感谢对我们的信任,期待下次光临</view>
|
<view class="tips">感谢对我们的信任,期待下次光临</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="status-bar" v-if="status === '6'">
|
<view class="status-bar" v-if="status === '6'">
|
||||||
<view class="status">已取消</view>
|
<view class="status">已取消</view>
|
||||||
<view class="countdown">订单已取消</view>
|
<view class="countdown">订单已取消</view>
|
||||||
<view class="tips">您的订单已取消,再来一单吧</view>
|
<!-- <view class="tips">您的订单已取消,再来一单吧</view> -->
|
||||||
</view>
|
</view>
|
||||||
<!-- <view class="status-bar" v-if="status === '退款中'">
|
<!-- <view class="status-bar" v-if="status === '退款中'">
|
||||||
<view class="status">已完成</view>
|
<view class="status">已完成</view>
|
||||||
@ -39,9 +39,9 @@
|
|||||||
<!-- 订单金额 -->
|
<!-- 订单金额 -->
|
||||||
<view class="amount-section">
|
<view class="amount-section">
|
||||||
<view v-if="status !== '退款中'">
|
<view v-if="status !== '退款中'">
|
||||||
<view class="total-amount">¥{{ orderInfo.shiliu_score }}</view>
|
<view class="total-amount">¥{{ orderInfo.total_amount }}</view>
|
||||||
<view class="original-price">商品下单应付
|
<view class="original-price">商品下单应付
|
||||||
<text> ¥{{ orderInfo.shiliu_score }}</text>
|
<text> ¥{{ orderInfo.total_amount }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="goods-item" v-for="(item, index) in orderInfo.commodity_order_item_list" :key="index">
|
<view class="goods-item" v-for="(item, index) in orderInfo.commodity_order_item_list" :key="index">
|
||||||
@ -62,7 +62,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="hr"></view>
|
<view class="hr"></view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<view class="info-label1">下单总金额( ¥{{ orderInfo.orderAmount }} )</view>
|
<view class="info-label1">下单总金额( ¥{{ orderInfo.total_amount }} )</view>
|
||||||
<view class="info-action">明细</view>
|
<view class="info-action">明细</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
@ -81,12 +81,12 @@
|
|||||||
<view class="section-title">配送信息</view>
|
<view class="section-title">配送信息</view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<view class="info-label">配送方式</view>
|
<view class="info-label">配送方式</view>
|
||||||
<!-- <view class="info-value">{{ orderInfo.deliveryType }}</view> -->
|
<view class="info-value" v-if="orderInfo.order_cate === 1">商家自配</view>
|
||||||
<view class="info-value">商家自配</view>
|
<view class="info-value" v-if="orderInfo.order_cate === 2">客户自提</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<view class="info-label">预计配送时间</view>
|
<view class="info-label">预计配送时间</view>
|
||||||
<view class="info-value"></view>
|
<view class="info-value">{{ orderInfo.estimated_delivery_time }}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@ -134,23 +134,23 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="bottom-buttons" v-if="status === '3'">
|
<view class="bottom-buttons" v-if="status === '3'">
|
||||||
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
||||||
<button class="cancel-btn" @click="cancelOrder">取消订单</button>
|
<button class="cancel-btn" @click="applyRefund">申请退款</button>
|
||||||
<!-- <button class="pay-btn" @click="gotoPayment">立即支付</button> -->
|
<!-- <button class="pay-btn" @click="gotoPayment">立即支付</button> -->
|
||||||
</view>
|
</view>
|
||||||
<view class="bottom-buttons" v-if="status === '4'">
|
<view class="bottom-buttons" v-if="status === '4'">
|
||||||
<button class="cancel-btn" @click="checkLogistics">查看物流</button>
|
<button class="cancel-btn" @click="checkLogistics">查看物流</button>
|
||||||
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
||||||
<button class="pay-btn" @click="gotoPayment">立即支付</button>
|
<button class="pay-btn" @click="confirmReceiving">确认收货</button>
|
||||||
</view>
|
</view>
|
||||||
<view class="bottom-buttons" v-if="status === '5'">
|
<view class="bottom-buttons" v-if="status === '5'">
|
||||||
<button class="cancel-btn" @click="orderEvaluate">服务评价</button>
|
<!-- <button class="cancel-btn" @click="afterSale">退换/售后</button> -->
|
||||||
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
||||||
<button class="pay-btn" @click="gotoPayment">立即支付</button>
|
<button class="pay-btn" @click="orderEvaluate" :disabled="orderInfo.evauate_status === 1">评价</button>
|
||||||
</view>
|
</view>
|
||||||
<view class="bottom-buttons" v-if="status === '6'">
|
<view class="bottom-buttons" v-if="status === '6'">
|
||||||
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
||||||
<!-- <button class="cancel-btn" @click="cancelOrder">服务评价</button> -->
|
<!-- <button class="cancel-btn" @click="cancelOrder">服务评价</button> -->
|
||||||
<button class="pay-btn" @click="gotoPayment">再来一单</button>
|
<!-- <button class="pay-btn" @click="gotoPayment">再来一单</button> -->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -158,7 +158,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { picUrl, NavgateTo } from "../../../utils";
|
import { picUrl, NavgateTo, request } from "../../../utils";
|
||||||
|
import { apiArr as afterSaleApi } from "../../../api/afterSale";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
@ -170,7 +171,6 @@ export default {
|
|||||||
},
|
},
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
const item = JSON.parse(options?.item);
|
const item = JSON.parse(options?.item);
|
||||||
console.log("🚀 ~ onLoad ~ item:", item)
|
|
||||||
// 启动倒计时
|
// 启动倒计时
|
||||||
item.order_status == "1" ? this.startCountdown() : "";
|
item.order_status == "1" ? this.startCountdown() : "";
|
||||||
this.status = JSON.stringify(item.order_status);
|
this.status = JSON.stringify(item.order_status);
|
||||||
@ -202,26 +202,116 @@ export default {
|
|||||||
content: "确定要取消订单吗?",
|
content: "确定要取消订单吗?",
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
if (res.confirm) {
|
if (res.confirm) {
|
||||||
// 调用取消订单API
|
const params = {
|
||||||
|
order_id: this.orderInfo.id,
|
||||||
|
method: 1,
|
||||||
|
cancel_reason: '用户主动取消',
|
||||||
|
}
|
||||||
|
request(afterSaleApi.cancelOrConfirm, "POST", params).then((res) => {
|
||||||
uni.showToast({ title: "订单已取消", icon: "none" });
|
uni.showToast({ title: "订单已取消", icon: "none" });
|
||||||
setTimeout(() => uni.navigateBack(), 1500);
|
setTimeout(() => {
|
||||||
|
uni.navigateBack();
|
||||||
|
}, 1500);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 申请退款
|
||||||
|
applyRefund() {
|
||||||
|
uni.showModal({
|
||||||
|
title: "申请退款",
|
||||||
|
content: "确定要申请退款吗?",
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
const params = {
|
||||||
|
order_id: this.orderInfo.id,
|
||||||
|
}
|
||||||
|
request(afterSaleApi.orderRefund, "POST", params).then((res) => {
|
||||||
|
uni.showToast({ title: "退款成功", icon: "none" });
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.navigateBack();
|
||||||
|
}, 1500);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 确认收货
|
||||||
|
confirmReceiving() {
|
||||||
|
uni.showModal({
|
||||||
|
title: "确认收货",
|
||||||
|
content: "确认收货后订单状态将变为【已完成】,如有售后需求可正常申请退款/售后,确定要确认收货吗?",
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
const params = {
|
||||||
|
order_id: this.orderInfo.id,
|
||||||
|
method: 2,
|
||||||
|
}
|
||||||
|
request(afterSaleApi.cancelOrConfirm, "POST", params).then((res) => {
|
||||||
|
uni.showToast({ title: "已确认收货", icon: "none" });
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.navigateBack();
|
||||||
|
}, 1500);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
gotoPayment() {
|
gotoPayment() {
|
||||||
console.log("🚀 ~ gotoPayment ~ 去支付:");
|
// 创建转换后的商品数组
|
||||||
// 跳转到支付页面
|
const transformedItems = this.orderInfo.commodity_order_item_list.map(goods => ({
|
||||||
// uni.navigateTo({
|
isafterSale: true,
|
||||||
// url: "/kitchen/pay/index",
|
orderId: item.id,
|
||||||
// });
|
commodity_goods_info: {
|
||||||
|
commodity_brief: "",
|
||||||
|
commodity_id: goods.goods_id,
|
||||||
|
commodity_pic: goods.commodity_pic,
|
||||||
|
goods_alias: goods.goods_name,
|
||||||
|
goods_carousel: "",
|
||||||
|
goods_detail_pic: "",
|
||||||
|
goods_intro: goods.goods_name,
|
||||||
|
goods_name: goods.goods_name,
|
||||||
|
goods_no: "",
|
||||||
|
goods_spec: goods.goods_spec,
|
||||||
|
goods_status: 1,
|
||||||
|
goods_unit: goods.goods_unit,
|
||||||
|
goods_video: "",
|
||||||
|
group_buy_activity_info: null,
|
||||||
|
id: goods.id,
|
||||||
|
is_same_day: goods.is_same_day || false,
|
||||||
|
is_support_same_day: goods.is_support_same_day || 2,
|
||||||
|
market_price: goods.sales_price,
|
||||||
|
sales_price: goods.sales_price,
|
||||||
|
stock_quantity: goods.stock_quantity
|
||||||
|
},
|
||||||
|
commodity_id: goods.goods_id,
|
||||||
|
count: goods.count,
|
||||||
|
create_time: this.orderInfo.create_time,
|
||||||
|
goods_id: goods.id,
|
||||||
|
group_buy_id: 0,
|
||||||
|
id: goods.id,
|
||||||
|
supplier_id: this.orderInfo.supplier_id,
|
||||||
|
supplier_name: this.orderInfo.supplier_name,
|
||||||
|
update_time: this.orderInfo.update_time,
|
||||||
|
user_id: this.orderInfo.user_id
|
||||||
|
}));
|
||||||
|
|
||||||
|
NavgateTo(`/packages/shop/groupPurchaseSubmit/index?shopCarList=${JSON.stringify(transformedItems)}`)
|
||||||
},
|
},
|
||||||
checkLogistics() {
|
checkLogistics() {
|
||||||
NavgateTo(`/packages/myOrders/logistics/index`);
|
NavgateTo(`/packages/myOrders/logistics/index`);
|
||||||
},
|
},
|
||||||
|
|
||||||
orderEvaluate() {
|
orderEvaluate() {
|
||||||
NavgateTo(`/packages/myOrders/orderEvaluate/index`);
|
NavgateTo(`/packages/myOrders/orderEvaluate/index?item=${JSON.stringify(this.orderInfo)}`);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 售后按钮
|
||||||
|
afterSale() {
|
||||||
|
NavgateTo(`/packages/myOrders/afterSale/index`);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -3,8 +3,8 @@
|
|||||||
<!-- 商品图片区域 -->
|
<!-- 商品图片区域 -->
|
||||||
<scroll-view class="goods-scroll" scroll-x>
|
<scroll-view class="goods-scroll" scroll-x>
|
||||||
<view class="goods-list">
|
<view class="goods-list">
|
||||||
<view class="goods-item" v-for="(item, index) in goods" :key="index">
|
<view class="goods-item" v-for="(item, index) in itemObj.commodity_order_item_list" :key="index">
|
||||||
<image :src="item.image" class="goods-img"></image>
|
<image :src="item.commodity_pic" class="goods-img"></image>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
@ -14,7 +14,7 @@
|
|||||||
<!-- 订单编号 -->
|
<!-- 订单编号 -->
|
||||||
<view class="order-info">
|
<view class="order-info">
|
||||||
<text class="order-label">订单编号</text>
|
<text class="order-label">订单编号</text>
|
||||||
<text class="order-value">38757328485</text>
|
<text class="order-value">{{ itemObj.order_no }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="rating">
|
<view class="rating">
|
||||||
<view>很差</view>
|
<view>很差</view>
|
||||||
@ -26,70 +26,38 @@
|
|||||||
<!-- 商品品质 -->
|
<!-- 商品品质 -->
|
||||||
<view class="rating-item">
|
<view class="rating-item">
|
||||||
<text class="rating-label">商品品质</text>
|
<text class="rating-label">商品品质</text>
|
||||||
<u-rate
|
<u-rate v-model="qualityRating" size="40" active-color="#FFB400" inactive-color="#EEEEEE" gutter="60"></u-rate>
|
||||||
v-model="qualityRating"
|
|
||||||
size="40"
|
|
||||||
active-color="#FFB400"
|
|
||||||
inactive-color="#EEEEEE"
|
|
||||||
gutter="60"
|
|
||||||
></u-rate>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 配送速度 -->
|
<!-- 配送速度 -->
|
||||||
<view class="rating-item">
|
<view class="rating-item">
|
||||||
<text class="rating-label">配送速度</text>
|
<text class="rating-label">配送速度</text>
|
||||||
<u-rate
|
<u-rate v-model="speedRating" size="40" active-color="#FFB400" inactive-color="#EEEEEE" gutter="60"></u-rate>
|
||||||
v-model="speedRating"
|
|
||||||
size="40"
|
|
||||||
active-color="#FFB400"
|
|
||||||
inactive-color="#EEEEEE"
|
|
||||||
gutter="60"
|
|
||||||
></u-rate>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 快递员服务 -->
|
<!-- 快递员服务 -->
|
||||||
<view class="rating-item">
|
<view class="rating-item">
|
||||||
<text class="rating-label">快递员服务</text>
|
<text class="rating-label">快递员服务</text>
|
||||||
<u-rate
|
<u-rate v-model="serviceRating" size="40" active-color="#FFB400" inactive-color="#EEEEEE" gutter="60"></u-rate>
|
||||||
v-model="serviceRating"
|
|
||||||
size="40"
|
|
||||||
active-color="#FFB400"
|
|
||||||
inactive-color="#EEEEEE"
|
|
||||||
gutter="60"
|
|
||||||
></u-rate>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 评价输入 -->
|
<!-- 评价输入 -->
|
||||||
<view class="comment-section">
|
<view class="comment-section">
|
||||||
<textarea
|
<textarea class="comment-input" placeholder="亲,可以从其他角度评价商品,可以帮助我们为您提供更好的服务~" v-model="comment"></textarea>
|
||||||
class="comment-input"
|
|
||||||
placeholder="亲,可以从其他角度评价商品,可以帮助我们为您提供更好的服务~"
|
|
||||||
v-model="comment"
|
|
||||||
></textarea>
|
|
||||||
</view>
|
</view>
|
||||||
<!-- 图片上传 -->
|
<!-- 图片上传 -->
|
||||||
<view class="upload-section">
|
<view class="upload-section">
|
||||||
<view class="image-list">
|
<view class="image-list">
|
||||||
<view
|
<view class="image-item" v-for="(img, index) in imageList" :key="index">
|
||||||
class="image-item"
|
|
||||||
v-for="(img, index) in imageList"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<image :src="img" class="uploaded-img"></image>
|
<image :src="img" class="uploaded-img"></image>
|
||||||
<view class="delete-btn" @click="deleteImage(index)">
|
<view class="delete-btn" @click="deleteImage(index)">
|
||||||
<text class="delete-icon">×</text>
|
<text class="delete-icon">×</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view
|
<view class="upload-btn" @click="chooseImage" v-if="imageList.length < 3">
|
||||||
class="upload-btn"
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/upload.png" class="upload-icon">
|
||||||
@click="chooseImage"
|
</image>
|
||||||
v-if="imageList.length < 3"
|
|
||||||
>
|
|
||||||
<image
|
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/upload.png"
|
|
||||||
class="upload-icon"
|
|
||||||
></image>
|
|
||||||
<view class="upload-text">上传图片</view>
|
<view class="upload-text">上传图片</view>
|
||||||
<view class="upload-count">({{ imageList.length }}/3)</view>
|
<view class="upload-count">({{ imageList.length }}/3)</view>
|
||||||
</view>
|
</view>
|
||||||
@ -103,24 +71,14 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { picUrl, NavgateTo, request } from "../../../utils";
|
||||||
|
import { apiArr } from "../../../api/afterSale";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// 商品列表
|
itemObj: {},
|
||||||
goods: [
|
|
||||||
{ image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index1.png" },
|
|
||||||
{ image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index2.png" },
|
|
||||||
{ image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index3.png" },
|
|
||||||
{ image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index4.png" },
|
|
||||||
{ image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index5.png" },
|
|
||||||
{ image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index1.png" },
|
|
||||||
{ image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index2.png" },
|
|
||||||
{ image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index3.png" },
|
|
||||||
{ image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index4.png" },
|
|
||||||
{ image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index5.png" },
|
|
||||||
],
|
|
||||||
// 评分数据
|
// 评分数据
|
||||||
qualityRating: 5,
|
qualityRating: 0,
|
||||||
speedRating: 0,
|
speedRating: 0,
|
||||||
serviceRating: 0,
|
serviceRating: 0,
|
||||||
// 评价内容
|
// 评价内容
|
||||||
@ -129,6 +87,9 @@ export default {
|
|||||||
imageList: [],
|
imageList: [],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
this.itemObj = JSON.parse(decodeURIComponent(options.item));
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 选择图片
|
// 选择图片
|
||||||
chooseImage() {
|
chooseImage() {
|
||||||
@ -161,7 +122,17 @@ export default {
|
|||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
// 这里添加提交评价的API调用逻辑
|
const params = {
|
||||||
|
order_id: this.itemObj.id,
|
||||||
|
goods_id: this.itemObj.commodity_order_item_list[0].goods_id,
|
||||||
|
user_id: uni.getStorageSync("userId"),
|
||||||
|
quality_score: this.qualityRating,
|
||||||
|
speed_score: this.speedRating,
|
||||||
|
service_score: this.serviceRating,
|
||||||
|
user_review: this.comment,
|
||||||
|
review_image: this.imageList,
|
||||||
|
}
|
||||||
|
request(apiArr.createReview, "POST", params).then((res) => {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: "评价提交成功",
|
title: "评价提交成功",
|
||||||
icon: "success",
|
icon: "success",
|
||||||
@ -169,6 +140,7 @@ export default {
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
uni.navigateBack();
|
uni.navigateBack();
|
||||||
}, 1500);
|
}, 1500);
|
||||||
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -89,6 +89,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.asGoodTag {
|
.asGoodTag {
|
||||||
@ -123,12 +124,9 @@
|
|||||||
|
|
||||||
.goods-desc {
|
.goods-desc {
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
color: #ff4d4f;
|
color: #999999;
|
||||||
background-color: #fff2f0;
|
|
||||||
padding: 4rpx 12rpx;
|
|
||||||
border-radius: 8rpx;
|
border-radius: 8rpx;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 10rpx 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.goods-price {
|
.goods-price {
|
||||||
@ -146,10 +144,9 @@
|
|||||||
.refund-amount {
|
.refund-amount {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
align-self: flex-start;
|
align-self: flex-start;
|
||||||
margin-top: 20rpx;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
position: relative;
|
position: absolute;
|
||||||
left: 140rpx;
|
right: 10rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.refund-info {
|
.refund-info {
|
||||||
@ -246,7 +243,6 @@
|
|||||||
|
|
||||||
/* 弹窗样式 */
|
/* 弹窗样式 */
|
||||||
.popup-content {
|
.popup-content {
|
||||||
width: 600rpx;
|
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
padding: 40rpx;
|
padding: 40rpx;
|
||||||
@ -301,12 +297,13 @@
|
|||||||
.continue-btn {
|
.continue-btn {
|
||||||
width: 240rpx;
|
width: 240rpx;
|
||||||
height: 80rpx;
|
height: 80rpx;
|
||||||
background-color: #f6f7fb;
|
background-color: #ffe8e5;
|
||||||
color: #333333;
|
color: #ff370b;
|
||||||
border-radius: 40rpx;
|
border-radius: 40rpx;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
line-height: 80rpx;
|
line-height: 80rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.know-btn {
|
.know-btn {
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<!-- 进度条 -->
|
<!-- 进度条 -->
|
||||||
<view class="progress-container" v-if="false">
|
<view class="progress-container" v-if="currentAfterSale.process_status === 1">
|
||||||
<view class="progress-item active">
|
<view class="progress-item active">
|
||||||
<text class="progress-text">商家处理</text>
|
<text class="progress-text">商家处理</text>
|
||||||
</view>
|
</view>
|
||||||
@ -15,7 +15,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="progress-container">
|
<view class="progress-container" v-if="currentAfterSale.process_status === 2">
|
||||||
<view class="progress-item active">
|
<view class="progress-item active">
|
||||||
<text class="progress-text">商家处理</text>
|
<text class="progress-text">商家处理</text>
|
||||||
</view>
|
</view>
|
||||||
@ -26,13 +26,13 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 状态提示 -->
|
<!-- 状态提示 -->
|
||||||
<view class="status-tip" v-if="false">
|
<view class="status-tip" v-if="currentAfterSale.process_status === 1">
|
||||||
<text class="status-title">请等待商家处理</text>
|
<text class="status-title">请等待商家处理</text>
|
||||||
<text class="status-desc"><text style="font-weight: bold;">2天</text>后商家未处理将自动同意</text>
|
<text class="status-desc"><text style="font-weight: bold;">2天</text>后商家未处理将自动同意</text>
|
||||||
<text class="status-desc">您已成功发起退款申请,请耐心等待商家处理</text>
|
<text class="status-desc">您已成功发起退款申请,请耐心等待商家处理</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="status-tip">
|
<view class="status-tip" v-if="currentAfterSale.review_status === 3">
|
||||||
<text class="status-title">商家拒绝申请,请您处理</text>
|
<text class="status-title">商家拒绝申请,请您处理</text>
|
||||||
<text class="status-desc"><text style="color: #f63b08;">2天</text>后未处理将自动关闭</text>
|
<text class="status-desc"><text style="color: #f63b08;">2天</text>后未处理将自动关闭</text>
|
||||||
</view>
|
</view>
|
||||||
@ -50,9 +50,10 @@
|
|||||||
<text class="asGoodTag asGoodTag1"
|
<text class="asGoodTag asGoodTag1"
|
||||||
v-if="currentAfterSale.commodity_order_item[0].is_support_same_day === 1">当日达</text>
|
v-if="currentAfterSale.commodity_order_item[0].is_support_same_day === 1">当日达</text>
|
||||||
{{ currentAfterSale.commodity_order_item[0].goods_name }}
|
{{ currentAfterSale.commodity_order_item[0].goods_name }}
|
||||||
<text class="refund-amount">退款:¥{{ currentAfterSale.refund_amount.toFixed(2) }}</text>
|
<text class="refund-amount">退款:¥{{ currentAfterSale.refund_amount ?
|
||||||
|
currentAfterSale.refund_amount.toFixed(2) : '0.00' }}</text>
|
||||||
</text>
|
</text>
|
||||||
<text class="goods-desc">{{ ite.after_sales_reason }}</text>
|
<text class="goods-desc">{{ currentAfterSale.commodity_order_item[0].goods_spec }}</text>
|
||||||
<text class="goods-price">
|
<text class="goods-price">
|
||||||
{{ '¥' + currentAfterSale.commodity_order_item[0].sales_price.toFixed(2) + '/个' }}
|
{{ '¥' + currentAfterSale.commodity_order_item[0].sales_price.toFixed(2) + '/个' }}
|
||||||
<text class="goods-count">X{{ currentAfterSale.commodity_order_item[0].count }}</text>
|
<text class="goods-count">X{{ currentAfterSale.commodity_order_item[0].count }}</text>
|
||||||
@ -75,7 +76,8 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<text class="info-label">退款金额<text style="color: #fc3811;">*</text></text>
|
<text class="info-label">退款金额<text style="color: #fc3811;">*</text></text>
|
||||||
<text class="info-value amount">{{ '¥' + currentAfterSale.refund_amount.toFixed(2) }}</text>
|
<text class="info-value amount">{{ '¥' + (currentAfterSale.refund_amount ?
|
||||||
|
currentAfterSale.refund_amount.toFixed(2) : '0.00') }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<text class="info-label">申请时间<text style="color: #fc3811;">*</text></text>
|
<text class="info-label">申请时间<text style="color: #fc3811;">*</text></text>
|
||||||
@ -89,7 +91,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 操作按钮 -->
|
<!-- 操作按钮 -->
|
||||||
<view class="action-buttons">
|
<view class="action-buttons" v-if="currentAfterSale.process_status === 1">
|
||||||
<button class="cancel-btn" @click="cancelRefund">撤销申请</button>
|
<button class="cancel-btn" @click="cancelRefund">撤销申请</button>
|
||||||
<button class="modify-btn" @click="modifyRefund">修改申请</button>
|
<button class="modify-btn" @click="modifyRefund">修改申请</button>
|
||||||
<button class="urge-btn" @click="urgeProcess">催处理</button>
|
<button class="urge-btn" @click="urgeProcess">催处理</button>
|
||||||
@ -115,7 +117,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { apiArr } from "../../../api/afterSale";
|
||||||
import {
|
import {
|
||||||
isPhone,
|
isPhone,
|
||||||
picUrl,
|
picUrl,
|
||||||
@ -136,14 +138,27 @@ export default {
|
|||||||
// 初始化日期选择器默认值为当前申请时间
|
// 初始化日期选择器默认值为当前申请时间
|
||||||
this.pickerDefaultDate = new Date(this.currentAfterSale.create_time);
|
this.pickerDefaultDate = new Date(this.currentAfterSale.create_time);
|
||||||
},
|
},
|
||||||
|
onShow() {
|
||||||
|
const storageAfterSale = uni.getStorageSync('afterSaleItem');
|
||||||
|
if (storageAfterSale) {
|
||||||
|
this.currentAfterSale = storageAfterSale;
|
||||||
|
uni.removeStorageSync('afterSaleItem');
|
||||||
|
}
|
||||||
|
},
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
const item = JSON.parse(options?.item);
|
const item = JSON.parse(options?.item);
|
||||||
console.log("🚀 ~ onLoad ~ item:", item)
|
console.log("🚀 ~ onLoad ~ item:", item)
|
||||||
this.currentAfterSale = item;
|
this.currentAfterSale = item;
|
||||||
},
|
},
|
||||||
|
// 添加onBackPress生命周期钩子,处理左上角返回按钮点击事件
|
||||||
|
onBackPress() {
|
||||||
|
// 确保使用uni.navigateBack()返回上一页,触发index页面的onShow生命周期
|
||||||
|
uni.navigateBack();
|
||||||
|
return true; // 阻止默认返回行为
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getServiceTypeText(type) {
|
getServiceTypeText(type) {
|
||||||
return type === 1 ? '退货退款' : '仅退款';
|
return type === 1 ? '退款' : (type === 2 ? '退货退款' : '换货');
|
||||||
},
|
},
|
||||||
|
|
||||||
// 格式化日期
|
// 格式化日期
|
||||||
@ -183,11 +198,15 @@ export default {
|
|||||||
confirmColor: "#ff4d4f",
|
confirmColor: "#ff4d4f",
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
if (res.confirm) {
|
if (res.confirm) {
|
||||||
// 撤销售后接口
|
const params = {
|
||||||
|
id: this.currentAfterSale.id,
|
||||||
|
}
|
||||||
|
request(apiArr.revokeApply, "POST", params).then((res) => {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '订单撤销成功',
|
title: '订单撤销成功',
|
||||||
icon: 'success'
|
icon: 'success'
|
||||||
});
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@ -66,8 +66,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.image-item image {
|
.image-item image {
|
||||||
width: 80rpx;
|
width: 100%;
|
||||||
height: 80rpx;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-text {
|
.image-text {
|
||||||
|
|||||||
@ -1,44 +1,38 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="evaluation-container">
|
<view class="evaluation-container">
|
||||||
<!-- 评价内容区域 -->
|
<!-- 评价内容区域 -->
|
||||||
|
<view>
|
||||||
|
<view v-for="(item, index) in orderList" :key="index">
|
||||||
<view class="evaluation-content">
|
<view class="evaluation-content">
|
||||||
<!-- 订单头部信息 -->
|
<!-- 订单头部信息 -->
|
||||||
<view class="order-header">
|
<view class="order-header">
|
||||||
<text class="order-name">{{ orderInfo.orderName }}</text>
|
<text class="order-name">{{ item.supplier_name }}</text>
|
||||||
<text class="order-number">{{ orderInfo.orderNumber }}</text>
|
<text class="order-number">{{ item.order_no }}</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="evaluation-area">
|
<view class="evaluation-area">
|
||||||
<text class="evaluation-text">{{ evaluationInfo.content }}</text>
|
<text class="evaluation-text">{{ item.evaluate_info.user_review }}</text>
|
||||||
<!-- 评价图片区域 -->
|
<!-- 评价图片区域 -->
|
||||||
<view class="image-list">
|
<view class="image-list" v-if="item.evaluate_info.review_image && item.evaluate_info.review_image.length > 0">
|
||||||
<view
|
<view class="image-item" v-for="(img, index) in parseReviewImages(item.evaluate_info.review_image)" :key="index">
|
||||||
class="image-item"
|
<image :src="img"></image>
|
||||||
v-for="(img, index) in evaluationInfo.images"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<image :src="img.url" mode="aspectFill"></image>
|
|
||||||
<text class="image-text">{{ img.text }}</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<text class="order-date">{{ orderInfo.date }}</text>
|
<text class="order-date">{{ item.evaluate_info.create_time }}</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 商品信息区域 -->
|
<!-- 商品信息区域 -->
|
||||||
<view class="product-info">
|
<view class="product-info">
|
||||||
<view class="product-img">
|
<view class="product-img">
|
||||||
<image :src="productInfo.imageUrl" mode="aspectFit"></image>
|
<image :src="item.commodity_order_item_list[0].commodity_pic"></image>
|
||||||
<view
|
<view class="tag" v-if="item.commodity_order_item_list[0].is_same_day === 1" :key="index">当日达</view>
|
||||||
class="tag"
|
|
||||||
v-for="(tag, index) in productInfo.tags"
|
|
||||||
:key="index"
|
|
||||||
>{{ tag }}</view
|
|
||||||
>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="product-details">
|
<view class="product-details">
|
||||||
<text class="product-name">{{ productInfo.name }}</text>
|
<text class="product-name">{{ item.commodity_order_item_list[0].goods_name }}</text>
|
||||||
<text class="product-spec">{{ productInfo.spec }}</text>
|
<text class="product-spec">{{ item.commodity_order_item_list[0].goods_spec }}</text>
|
||||||
<text class="product-unit">{{ productInfo.unit }}</text>
|
<text class="product-unit">{{ item.commodity_order_item_list[0].sales_price }}/{{ item.commodity_order_item_list[0].goods_unit }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -47,30 +41,61 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
props: {
|
||||||
|
orderData: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
orderInfo: {
|
orderList: [],
|
||||||
orderName: "衡水商贸国际公司",
|
|
||||||
orderNumber: "4534534255",
|
|
||||||
date: "2025-07-21",
|
|
||||||
},
|
|
||||||
evaluationInfo: {
|
|
||||||
content: "评价文字内容",
|
|
||||||
images: [
|
|
||||||
{ url: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/eval1.png", text: "评价图片" },
|
|
||||||
{ url: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/eval2.png", text: "评价图片" },
|
|
||||||
{ url: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/eval3.png", text: "评价图片" },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
productInfo: {
|
|
||||||
imageUrl: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/product.png",
|
|
||||||
tags: ["当日达", "当日达"],
|
|
||||||
name: "货品名称",
|
|
||||||
spec: "货品规格",
|
|
||||||
unit: "货品单位",
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
methods: {
|
||||||
|
// 解析评价图片格式
|
||||||
|
parseReviewImages(reviewImage) {
|
||||||
|
try {
|
||||||
|
// 检查是否为字符串类型且包含有效内容
|
||||||
|
if (typeof reviewImage === 'string' && reviewImage.trim()) {
|
||||||
|
// 去除可能的引号和空格,然后尝试解析为数组
|
||||||
|
const cleanStr = reviewImage.replace(/^"|"$/g, '').replace(/^'|'$/g, '').trim();
|
||||||
|
let images = [];
|
||||||
|
|
||||||
|
// 尝试使用JSON解析
|
||||||
|
if (cleanStr.startsWith('[') && cleanStr.endsWith(']')) {
|
||||||
|
images = JSON.parse(cleanStr);
|
||||||
|
} else if (cleanStr.includes(',')) {
|
||||||
|
// 如果是逗号分隔的字符串
|
||||||
|
images = cleanStr.split(',').map(img => img.trim());
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确保返回的是数组并且每个元素都是有效的URL
|
||||||
|
return Array.isArray(images) ? images : [];
|
||||||
|
}
|
||||||
|
// 如果已经是数组则直接返回
|
||||||
|
return Array.isArray(reviewImage) ? reviewImage : [];
|
||||||
|
} catch (error) {
|
||||||
|
console.error('解析评价图片失败:', error);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// 组件挂载时初始化数据
|
||||||
|
this.orderList = this.orderData;
|
||||||
|
console.log("🚀 ~ mounted ~ this.orderList:", this.orderList);
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// 监听orderData的变化,确保子组件能响应父组件数据更新
|
||||||
|
orderData: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.orderList = newVal;
|
||||||
|
console.log("🚀 ~ watch orderData ~ this.orderList:", this.orderList);
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -107,6 +107,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.asGoodTag {
|
.asGoodTag {
|
||||||
@ -141,12 +142,9 @@
|
|||||||
|
|
||||||
.goods-desc {
|
.goods-desc {
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
color: #ff4d4f;
|
color: #999999;
|
||||||
background-color: #fff2f0;
|
|
||||||
padding: 4rpx 12rpx;
|
|
||||||
border-radius: 8rpx;
|
border-radius: 8rpx;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 10rpx 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.goods-price {
|
.goods-price {
|
||||||
@ -164,10 +162,9 @@
|
|||||||
.refund-amount {
|
.refund-amount {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
align-self: flex-start;
|
align-self: flex-start;
|
||||||
margin-top: 20rpx;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
position: relative;
|
position: absolute;
|
||||||
left: 140rpx;
|
right: 10rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.refund-info {
|
.refund-info {
|
||||||
@ -262,6 +259,18 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.moneyGo-btn{
|
||||||
|
width: 220rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: #ff370b;
|
||||||
|
color: #ffffff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.bottomImg{
|
.bottomImg{
|
||||||
width: 70rpx;
|
width: 70rpx;
|
||||||
height: 80rpx;
|
height: 80rpx;
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<!-- 进度条 -->
|
<!-- 进度条 -->
|
||||||
<view class="progress-container" v-if="false">
|
<view class="progress-container">
|
||||||
<view class="progress-item">
|
<view class="progress-item">
|
||||||
<text class="progress-text">商家处理</text>
|
<text class="progress-text">商家处理</text>
|
||||||
</view>
|
</view>
|
||||||
@ -15,7 +15,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="progress-container">
|
<view class="progress-container" v-if="false">
|
||||||
<view class="progress-item">
|
<view class="progress-item">
|
||||||
<text class="progress-text">商家处理</text>
|
<text class="progress-text">商家处理</text>
|
||||||
</view>
|
</view>
|
||||||
@ -46,10 +46,10 @@
|
|||||||
{{ currentAfterSale.commodity_order_item[0].goods_name }}
|
{{ currentAfterSale.commodity_order_item[0].goods_name }}
|
||||||
<text class="refund-amount">退款:¥{{ currentAfterSale.refund_amount.toFixed(2) }}</text>
|
<text class="refund-amount">退款:¥{{ currentAfterSale.refund_amount.toFixed(2) }}</text>
|
||||||
</text>
|
</text>
|
||||||
<text class="goods-desc">{{ ite.after_sales_reason }}</text>
|
<text class="goods-desc">{{ currentAfterSale.commodity_order_item[0].goods_spec }}</text>
|
||||||
<text class="goods-price">
|
<text class="goods-price">
|
||||||
{{ '¥' + currentAfterSale.commodity_order_item[0].sales_price.toFixed(2) + '/个' }}
|
{{ '¥' + currentAfterSale.commodity_order_item[0].sales_price.toFixed(2) + '/个' }}
|
||||||
<text class="goods-count">X{{ currentAfterSale.commodity_order_item[0].count }}</text>
|
<text class="goods-count">X{{ currentAfterSale.after_sales_goods.split('@')[0] }}</text>
|
||||||
</text>
|
</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -87,12 +87,12 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 操作按钮 -->
|
<!-- 操作按钮 -->
|
||||||
<view class="action-buttons" v-if="false">
|
<view class="action-buttons">
|
||||||
<button class="modify-btn" @click="modifyRefund">寄件详情</button>
|
<button class="modify-btn" @click="shippingDetails">寄件详情</button>
|
||||||
<button class="cancel-btn" @click="moneyGo">钱款去向</button>
|
<button class="moneyGo-btn" @click="moneyGo">钱款去向</button>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="action-buttons">
|
<view class="action-buttons" v-if="false">
|
||||||
<button class="cancel-btn" @click="cancelRefund">撤销申请</button>
|
<button class="cancel-btn" @click="cancelRefund">撤销申请</button>
|
||||||
<button class="urge-btn" @click="modifyRefund">修改申请</button>
|
<button class="urge-btn" @click="modifyRefund">修改申请</button>
|
||||||
</view>
|
</view>
|
||||||
@ -104,7 +104,7 @@
|
|||||||
<!-- 弹窗头部 -->
|
<!-- 弹窗头部 -->
|
||||||
<view class="popup-header">
|
<view class="popup-header">
|
||||||
<text class="header-title">退款总额 ¥{{ currentAfterSale.refund_amount ?
|
<text class="header-title">退款总额 ¥{{ currentAfterSale.refund_amount ?
|
||||||
currentAfterSale.refund_amount.toFixed(2) : '34.18' }}</text>
|
currentAfterSale.refund_amount.toFixed(2) : '0.00' }}</text>
|
||||||
<text class="close-btn" @click="closeMoneyGoPopup">取消</text>
|
<text class="close-btn" @click="closeMoneyGoPopup">取消</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@ -118,7 +118,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<text class="method-text">退回微信</text>
|
<text class="method-text">退回微信</text>
|
||||||
<text class="method-amount">{{ currentAfterSale.refund_amount ? '¥' +
|
<text class="method-amount">{{ currentAfterSale.refund_amount ? '¥' +
|
||||||
currentAfterSale.refund_amount.toFixed(2) : '¥34.18' }}</text>
|
currentAfterSale.refund_amount.toFixed(2) : '¥0.0' }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 退款状态 -->
|
<!-- 退款状态 -->
|
||||||
@ -155,6 +155,7 @@ import {
|
|||||||
upload,
|
upload,
|
||||||
NavgateTo
|
NavgateTo
|
||||||
} from '../../../utils';
|
} from '../../../utils';
|
||||||
|
import { apiArr } from "../../../api/afterSale";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
@ -175,7 +176,7 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getServiceTypeText(type) {
|
getServiceTypeText(type) {
|
||||||
return type === 1 ? '退货退款' : '仅退款';
|
return type === 1 ? '仅退款' : (type === 2 ? '退货退款' : '换货');
|
||||||
},
|
},
|
||||||
|
|
||||||
// 格式化日期
|
// 格式化日期
|
||||||
@ -237,11 +238,15 @@ export default {
|
|||||||
confirmColor: "#ff4d4f",
|
confirmColor: "#ff4d4f",
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
if (res.confirm) {
|
if (res.confirm) {
|
||||||
// 撤销售后接口
|
const params = {
|
||||||
|
id: this.currentAfterSale.id,
|
||||||
|
}
|
||||||
|
request(apiArr.revokeApply, "POST", params).then((res) => {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '订单撤销成功',
|
title: '订单撤销成功',
|
||||||
icon: 'success'
|
icon: 'success'
|
||||||
});
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@ -137,9 +137,9 @@ export default {
|
|||||||
};
|
};
|
||||||
console.log('提交物流信息:', logisticsInfo);
|
console.log('提交物流信息:', logisticsInfo);
|
||||||
|
|
||||||
// 这里可以添加提交后的处理逻辑
|
// 显示成功提示
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '物流信息提交成功',
|
title: '提交成功',
|
||||||
icon: 'success'
|
icon: 'success'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@ -108,6 +108,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.asGoodTag {
|
.asGoodTag {
|
||||||
@ -142,12 +143,9 @@
|
|||||||
|
|
||||||
.goods-desc {
|
.goods-desc {
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
color: #ff4d4f;
|
color: #999999;
|
||||||
background-color: #fff2f0;
|
|
||||||
padding: 4rpx 12rpx;
|
|
||||||
border-radius: 8rpx;
|
border-radius: 8rpx;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 10rpx 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.goods-price {
|
.goods-price {
|
||||||
@ -165,10 +163,9 @@
|
|||||||
.refund-amount {
|
.refund-amount {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
align-self: flex-start;
|
align-self: flex-start;
|
||||||
margin-top: 20rpx;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
position: relative;
|
position: absolute;
|
||||||
left: 140rpx;
|
right: 10rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.refund-info {
|
.refund-info {
|
||||||
|
|||||||
@ -22,11 +22,15 @@
|
|||||||
<view class="status-desc2">需您自行联系快递公司退回,请不要邮寄到付</view>
|
<view class="status-desc2">需您自行联系快递公司退回,请不要邮寄到付</view>
|
||||||
<view class="info-item" style="border: none;">
|
<view class="info-item" style="border: none;">
|
||||||
<text class="info-label">商家地址</text>
|
<text class="info-label">商家地址</text>
|
||||||
<text class="info-value">{{ currentAfterSale.after_sales_no }}</text>
|
<text class="info-value">{{ currentAfterSale.supplier_address }}</text>
|
||||||
<text class="copy-icon" @click="copyAdress"></text>
|
<text class="copy-icon" @click="copyAdress"></text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<button class="addOrderIdBtn" @click="addOrderId">填写单号</button>
|
<button class="addOrderIdBtn" @click="addOrderId" v-if="true">填写单号</button>
|
||||||
|
<view class="logistics-info" v-else>
|
||||||
|
<text>退货物流:</text>
|
||||||
|
<text v-if="false"></text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="hr"></view>
|
<view class="hr"></view>
|
||||||
@ -44,10 +48,11 @@
|
|||||||
{{ currentAfterSale.commodity_order_item[0].goods_name }}
|
{{ currentAfterSale.commodity_order_item[0].goods_name }}
|
||||||
<text class="refund-amount">退款:¥{{ currentAfterSale.refund_amount.toFixed(2) }}</text>
|
<text class="refund-amount">退款:¥{{ currentAfterSale.refund_amount.toFixed(2) }}</text>
|
||||||
</text>
|
</text>
|
||||||
<text class="goods-desc">{{ ite.after_sales_reason }}</text>
|
<text class="goods-desc">{{ currentAfterSale.commodity_order_item[0].goods_spec }}</text>
|
||||||
<text class="goods-price">
|
<text class="goods-price">
|
||||||
{{ '¥' + currentAfterSale.commodity_order_item[0].sales_price.toFixed(2) + '/个' }}
|
{{ '¥' + currentAfterSale.commodity_order_item[0].sales_price.toFixed(2) + '/个' }}
|
||||||
<text class="goods-count">X{{ currentAfterSale.commodity_order_item[0].count }}</text>
|
<text class="goods-count">X{{ currentAfterSale.after_sales_goods.split('@')[0] }}
|
||||||
|
</text>
|
||||||
</text>
|
</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -82,8 +87,10 @@
|
|||||||
|
|
||||||
<!-- 操作按钮 -->
|
<!-- 操作按钮 -->
|
||||||
<view class="action-buttons">
|
<view class="action-buttons">
|
||||||
|
<!-- 填写完物流单号后不显示图片和平台介入按钮 -->
|
||||||
<view>
|
<view>
|
||||||
<image class="bottomImg" src="http://localhost:8080/secdBack_bottom.png" alt=""/>
|
<image class="bottomImg" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/secdBack_bottom.png"
|
||||||
|
alt="" />
|
||||||
</view>
|
</view>
|
||||||
<button class="modify-btn" @click="modifyRefund">平台介入</button>
|
<button class="modify-btn" @click="modifyRefund">平台介入</button>
|
||||||
<button class="cancel-btn" @click="cancelRefund">撤销申请</button>
|
<button class="cancel-btn" @click="cancelRefund">撤销申请</button>
|
||||||
@ -92,7 +99,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
import {
|
import {
|
||||||
isPhone,
|
isPhone,
|
||||||
picUrl,
|
picUrl,
|
||||||
@ -100,12 +106,14 @@ import {
|
|||||||
upload,
|
upload,
|
||||||
NavgateTo
|
NavgateTo
|
||||||
} from '../../../utils';
|
} from '../../../utils';
|
||||||
|
import { apiArr } from "../../../api/afterSale";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
currentAfterSale: {},
|
currentAfterSale: {},
|
||||||
pickerDefaultDate: new Date()
|
pickerDefaultDate: new Date(),
|
||||||
|
logisticsInfo: null
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
@ -116,10 +124,25 @@ export default {
|
|||||||
const item = JSON.parse(options?.item);
|
const item = JSON.parse(options?.item);
|
||||||
console.log("🚀 ~ onLoad ~ item:", item)
|
console.log("🚀 ~ onLoad ~ item:", item)
|
||||||
this.currentAfterSale = item;
|
this.currentAfterSale = item;
|
||||||
|
this.getLogisticsInfo();
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
// 页面显示时检查是否有新的物流信息
|
||||||
|
this.getLogisticsInfo();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 获取物流信息
|
||||||
|
getLogisticsInfo() {
|
||||||
|
const info = uni.getStorageSync('logisticsInfo');
|
||||||
|
if (info) {
|
||||||
|
this.logisticsInfo = info;
|
||||||
|
// 可选:清空storage,避免下次进入还显示旧数据
|
||||||
|
// uni.removeStorageSync('logisticsInfo');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
getServiceTypeText(type) {
|
getServiceTypeText(type) {
|
||||||
return type === 1 ? '退货退款' : '仅退款';
|
return type === 1 ? '仅退款' : (type === 2 ? '退货退款' : '换货');
|
||||||
},
|
},
|
||||||
|
|
||||||
// 格式化日期
|
// 格式化日期
|
||||||
@ -132,7 +155,7 @@ export default {
|
|||||||
// 赋值商家地址
|
// 赋值商家地址
|
||||||
copyAdress() {
|
copyAdress() {
|
||||||
uni.setClipboardData({
|
uni.setClipboardData({
|
||||||
data: this.currentAfterSale.after_sales_no,
|
data: this.currentAfterSale.supplier_address,
|
||||||
success: () => {
|
success: () => {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '复制成功',
|
title: '复制成功',
|
||||||
@ -148,7 +171,7 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
addOrderId(){
|
addOrderId() {
|
||||||
NavgateTo(`../returnLogistics/index?item=${JSON.stringify(this.currentAfterSale)}`);
|
NavgateTo(`../returnLogistics/index?item=${JSON.stringify(this.currentAfterSale)}`);
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -181,11 +204,15 @@ export default {
|
|||||||
confirmColor: "#ff4d4f",
|
confirmColor: "#ff4d4f",
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
if (res.confirm) {
|
if (res.confirm) {
|
||||||
// 撤销售后接口
|
const params = {
|
||||||
|
id: this.currentAfterSale.id,
|
||||||
|
}
|
||||||
|
request(apiArr.revokeApply, "POST", params).then((res) => {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '订单撤销成功',
|
title: '订单撤销成功',
|
||||||
icon: 'success'
|
icon: 'success'
|
||||||
});
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@ -193,7 +220,7 @@ export default {
|
|||||||
|
|
||||||
// 修改申请
|
// 修改申请
|
||||||
modifyRefund() {
|
modifyRefund() {
|
||||||
NavgateTo(`../apply/index?item=${JSON.stringify(this.currentAfterSale)}`);
|
// NavgateTo(`../apply/index?item=${JSON.stringify(this.currentAfterSale)}`);
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
106
packages/park/addCar/index.css
Normal file
106
packages/park/addCar/index.css
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
page {
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
padding-top: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 80%;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #ff4016;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 32rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
margin: 100rpx auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectColorBox{
|
||||||
|
width: 95%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin: 30rpx auto 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectColor{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color{
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 弹窗样式 */
|
||||||
|
.payIpt {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 30rpx 30rpx 0 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tit {
|
||||||
|
font-size: 32rpx;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
font-weight: bold;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 颜色列表样式 */
|
||||||
|
.color-list {
|
||||||
|
max-height: 500rpx;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-item {
|
||||||
|
font-size: 28rpx;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-item.active {
|
||||||
|
color: #ff4016;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部按钮样式 */
|
||||||
|
.popup-footer {
|
||||||
|
display: flex;
|
||||||
|
border-top: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn,
|
||||||
|
.confirm-btn {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn {
|
||||||
|
color: #666;
|
||||||
|
border-right: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-btn {
|
||||||
|
color: #ff4016;
|
||||||
|
}
|
||||||
127
packages/park/addCar/index.vue
Normal file
127
packages/park/addCar/index.vue
Normal file
@ -0,0 +1,127 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="container">
|
||||||
|
<view class="title">请输入车牌号码</view>
|
||||||
|
<car-number-input @numberInputResult="numberInputResult" :defaultStr="defaultNum" ref="carNumberInput" />
|
||||||
|
<view class="selectColorBox" @click="show = true">
|
||||||
|
<view>车牌颜色</view>
|
||||||
|
<view class="selectColor">
|
||||||
|
<view class="color">{{ color }}</view>
|
||||||
|
<u-icon name="arrow-right" size="25"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="btn" @click="submit">确定</view>
|
||||||
|
|
||||||
|
<!-- 选择车牌颜色 -->
|
||||||
|
<u-popup :show="show" :round="30" mode="bottom" @close="onClose">
|
||||||
|
<view class="payIpt">
|
||||||
|
<view class="tit">选择车牌颜色</view>
|
||||||
|
<!-- 颜色选择列表 -->
|
||||||
|
<scroll-view class="color-list" scroll-y>
|
||||||
|
<view class="color-item" :class="{ 'active': selectedColorIndex === index }"
|
||||||
|
v-for="(item, index) in colorOptions" :key="index" @click="selectColor(index)">
|
||||||
|
{{ item }}
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<!-- 底部按钮 -->
|
||||||
|
<view class="popup-footer">
|
||||||
|
<view class="cancel-btn" @click="onClose">取消</view>
|
||||||
|
<view class="confirm-btn" @click="confirmColor">确定</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
isPhone,
|
||||||
|
picUrl,
|
||||||
|
request,
|
||||||
|
upload,
|
||||||
|
NavgateTo
|
||||||
|
} from '../../../utils';
|
||||||
|
import { apiArr } from '@/api/park.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
defaultNum: '',
|
||||||
|
color: '请选择',
|
||||||
|
show: false,
|
||||||
|
// 颜色选项列表
|
||||||
|
colorOptions: ['蓝牌', '黄牌', '黑牌', '白牌', '绿牌', '渐变绿底黑字', '黄绿双拼底黑字'],
|
||||||
|
// 当前选中的颜色索引
|
||||||
|
selectedColorIndex: -1
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
numberInputResult(e) {
|
||||||
|
this.defaultNum = e;
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
this.show = false;
|
||||||
|
},
|
||||||
|
// 选择颜色
|
||||||
|
selectColor(index) {
|
||||||
|
this.selectedColorIndex = index;
|
||||||
|
},
|
||||||
|
// 确认选择的颜色
|
||||||
|
confirmColor() {
|
||||||
|
if (this.selectedColorIndex !== -1) {
|
||||||
|
this.color = this.colorOptions[this.selectedColorIndex];
|
||||||
|
}
|
||||||
|
this.show = false;
|
||||||
|
},
|
||||||
|
// 提交表单
|
||||||
|
submit() {
|
||||||
|
const actualNumber = this.defaultNum.replace(/\s/g, '');
|
||||||
|
if (this.defaultNum == '' || actualNumber.length < 7) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入正确的车牌号',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
})
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this.color == '请选择') {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请选择车牌颜色',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
})
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const params = {
|
||||||
|
user_id: uni.getStorageSync('userId'),
|
||||||
|
car_number: this.defaultNum,
|
||||||
|
car_number_color: this.color
|
||||||
|
}
|
||||||
|
request(apiArr.carAdd, "POST", params).then((res) => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '添加成功',
|
||||||
|
icon: 'success',
|
||||||
|
duration: 2000
|
||||||
|
})
|
||||||
|
if (this.$refs.carNumberInput) {
|
||||||
|
// 直接更新子组件的inputList数组
|
||||||
|
for (let i = 0; i < 8; i++) {
|
||||||
|
this.$refs.carNumberInput.inputList[i] = ' ';
|
||||||
|
}
|
||||||
|
this.$refs.carNumberInput.$forceUpdate();
|
||||||
|
}
|
||||||
|
this.color = '请选择';
|
||||||
|
this.selectedColorIndex = -1;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url('./index.css')
|
||||||
|
</style>
|
||||||
124
packages/park/index/index.css
Normal file
124
packages/park/index/index.css
Normal file
@ -0,0 +1,124 @@
|
|||||||
|
page {
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
padding-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 车辆信息容器样式 */
|
||||||
|
.container-box{
|
||||||
|
height: 83vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.car-info-container {
|
||||||
|
width: 92%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-bottom: 1rpx solid #eeeeee;
|
||||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.car-info{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 车牌样式 */
|
||||||
|
.license-plate {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 车牌类型标签样式 */
|
||||||
|
.plate-type-box{
|
||||||
|
padding: 11rpx 2rpx;
|
||||||
|
/* border: 1rpx solid #1890ff; */
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.plate-type {
|
||||||
|
background-color: #1890ff;
|
||||||
|
color: white;
|
||||||
|
padding: 10rpx 20rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 车牌号样式 */
|
||||||
|
.plate-number {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: 500;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 15rpx 30rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 蓝色车牌样式 */
|
||||||
|
.plate-color-blue {
|
||||||
|
background-color: #1890ff;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 黄色车牌样式 */
|
||||||
|
.plate-color-yellow {
|
||||||
|
background-color: #ffc53d;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 黑色车牌样式 */
|
||||||
|
.plate-color-black {
|
||||||
|
background-color: #333333;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 白色车牌样式 */
|
||||||
|
.plate-color-white {
|
||||||
|
background-color: white;
|
||||||
|
color: black;
|
||||||
|
border: 1rpx solid #dddddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 绿色车牌样式 */
|
||||||
|
.plate-color-green {
|
||||||
|
background-color: #37bd75;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 渐变绿底黑字车牌样式 */
|
||||||
|
.plate-color-gradient-green {
|
||||||
|
background: linear-gradient(180deg, #ffffff 0%, #2fe259 100%);
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 黄绿双拼底黑字车牌样式 */
|
||||||
|
.plate-color-yellow-green {
|
||||||
|
background: linear-gradient(90deg, #ffc53d 30%, #37bd75 0%);
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plate-energy{
|
||||||
|
font-size: 24rpx;
|
||||||
|
padding: 7rpx 15rpx;
|
||||||
|
margin-left: 15rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
background-color: #f2f3f4;
|
||||||
|
color: #37bd75;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 添加车辆按钮样式 */
|
||||||
|
.add-car-btn {
|
||||||
|
height: 100rpx;
|
||||||
|
width: 80%;
|
||||||
|
background-color: #ff3f15;
|
||||||
|
line-height: 100rpx;
|
||||||
|
color: white;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 100rpx;
|
||||||
|
left: 10%;
|
||||||
|
}
|
||||||
105
packages/park/index/index.vue
Normal file
105
packages/park/index/index.vue
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 车辆信息区域 -->
|
||||||
|
<view class="container-box">
|
||||||
|
<view class="car-info-container" v-for="(item, index) in carList" :key="index">
|
||||||
|
<view class="car-info">
|
||||||
|
<view class="license-plate">
|
||||||
|
<view class="plate-type-box">
|
||||||
|
<text class="plate-type" :class="{
|
||||||
|
'plate-color-blue': item.car_number_color === '蓝牌',
|
||||||
|
'plate-color-yellow': item.car_number_color === '黄牌',
|
||||||
|
'plate-color-black': item.car_number_color === '黑牌',
|
||||||
|
'plate-color-white': item.car_number_color === '白牌',
|
||||||
|
'plate-color-green': item.car_number_color === '绿牌',
|
||||||
|
'plate-color-gradient-green': item.car_number_color === '渐变绿底黑字',
|
||||||
|
'plate-color-yellow-green': item.car_number_color === '黄绿双拼底黑字'
|
||||||
|
}">{{ item.car_number_color }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="plate-number">
|
||||||
|
{{ item.car_number }}
|
||||||
|
<view class="plate-energy" v-if="getActualCarNumberLength(item.car_number) > 7">新能源</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<u-icon name="trash" size="45rpx" @click="deleteCar(item)"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 添加车辆按钮 -->
|
||||||
|
<button class="add-car-btn" @click="addCar">添加车辆</button>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
isPhone,
|
||||||
|
picUrl,
|
||||||
|
request,
|
||||||
|
upload,
|
||||||
|
NavgateTo
|
||||||
|
} from '../../../utils';
|
||||||
|
import { apiArr } from '@/api/park.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
carList: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getCarList() {
|
||||||
|
const params = {
|
||||||
|
user_id: uni.getStorageSync('userId')
|
||||||
|
}
|
||||||
|
request(apiArr.carList, "POST", params).then((res) => {
|
||||||
|
this.carList = res.car_list;
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 计算车牌号的实际长度,去除所有不可见字符
|
||||||
|
getActualCarNumberLength(carNumber) {
|
||||||
|
if (!carNumber) return 0;
|
||||||
|
// 去除所有空格和不可见字符
|
||||||
|
const actualNumber = carNumber.replace(/\s/g, '');
|
||||||
|
return actualNumber.length;
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
deleteCar(item) {
|
||||||
|
uni.showModal({
|
||||||
|
title: '提示',
|
||||||
|
content: '确定删除该车辆吗?',
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
const params = {
|
||||||
|
car_id: item.id
|
||||||
|
}
|
||||||
|
request(apiArr.deleteCar, "POST", params).then((res) => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '删除成功',
|
||||||
|
icon: 'success',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
this.getCarList();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
addCar() {
|
||||||
|
// 跳转到添加车辆页面
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/packages/park/addCar/index'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
this.getCarList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url('./index.css');
|
||||||
|
</style>
|
||||||
393
packages/park/monthlyPayment/index.css
Normal file
393
packages/park/monthlyPayment/index.css
Normal file
@ -0,0 +1,393 @@
|
|||||||
|
/* 包月支付页面样式 */
|
||||||
|
page {
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monthly-payment-container {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 90rpx;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 94vh;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 98;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 下拉停车场列表样式 */
|
||||||
|
.parking-list {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
border-radius: 0 0 40rpx 40rpx;
|
||||||
|
position: fixed;
|
||||||
|
top: 80rpx;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 搜索框样式 */
|
||||||
|
.search-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
margin: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333333;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 停车场列表项样式 */
|
||||||
|
.parking-items {
|
||||||
|
max-height: 600rpx;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 25rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-item-right {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-name {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-distance {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-address {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
display: block;
|
||||||
|
margin-top: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-item-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-selected {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #ff4219;
|
||||||
|
position: relative;
|
||||||
|
right: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-spaces {
|
||||||
|
background-color: #ffeeee;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 8rpx 16rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spaces-label {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #ff4219;
|
||||||
|
margin-bottom: 4rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spaces-number {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ff4219;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 顶部标题样式 */
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
background-color: #fff3f1;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
height: 45rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333333;
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-arrow {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 车辆信息样式 */
|
||||||
|
.car-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 40rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.car-image {
|
||||||
|
width: 50%;
|
||||||
|
height: 200rpx;
|
||||||
|
position: absolute;
|
||||||
|
top: 193rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 停车场信息样式 */
|
||||||
|
.park-info {
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
margin-top: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.park-name {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.park-type {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ff4d4f;
|
||||||
|
margin-left: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 支付金额样式 */
|
||||||
|
.payment-amount {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-label {
|
||||||
|
display: block;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #c8c7c7;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-value {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #ff4d4f;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 选项列表样式 */
|
||||||
|
.options-list {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
margin: 200rpx 30rpx 0;
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-item {
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
margin-bottom: 25rpx;
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-image {
|
||||||
|
width: 35rpx;
|
||||||
|
height: 35rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-label {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-val {
|
||||||
|
color: #ff370a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-val2 {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-value {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
flex: 1;
|
||||||
|
text-align: right;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-arrow {
|
||||||
|
width: 24rpx;
|
||||||
|
height: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 下一步按钮样式 */
|
||||||
|
.next-step-btn {
|
||||||
|
background-color: #ff4219;
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
padding: 20rpx;
|
||||||
|
border-radius: 100rpx;
|
||||||
|
margin: 40rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-step-text {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 订单记录样式 */
|
||||||
|
.order-record {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-record-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ff3f11;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 弹窗通用样式 */
|
||||||
|
.car-plate-popup {
|
||||||
|
padding: 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 30rpx 30rpx 0 0;
|
||||||
|
max-height: 80vh; /* 限制弹窗最大高度 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.car-plate-list {
|
||||||
|
max-height: 600rpx;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-right: 10rpx; /* 为滚动条留出空间 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 美化滚动条样式 */
|
||||||
|
.car-plate-list::-webkit-scrollbar {
|
||||||
|
width: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.car-plate-list::-webkit-scrollbar-track {
|
||||||
|
background: #f1f1f1;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.car-plate-list::-webkit-scrollbar-thumb {
|
||||||
|
background: #ccc;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.car-plate-list::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.car-plate-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.car-plate-item.selected {
|
||||||
|
background-color: #ff431923;
|
||||||
|
border: 2rpx solid #ff4219;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plate-number {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333333;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rule-price {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ff4219;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-footer {
|
||||||
|
margin-top: 30rpx;
|
||||||
|
padding-top: 20rpx;
|
||||||
|
border-top: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
background-color: #ff4219;
|
||||||
|
color: #ffffff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 45rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn:active {
|
||||||
|
background-color: #e03a16;
|
||||||
|
}
|
||||||
499
packages/park/monthlyPayment/index.vue
Normal file
499
packages/park/monthlyPayment/index.vue
Normal file
@ -0,0 +1,499 @@
|
|||||||
|
<template>
|
||||||
|
<view class="monthly-payment-container">
|
||||||
|
<!-- 顶部标题 -->
|
||||||
|
<view class="header" @tap="toggleDropdown">
|
||||||
|
<text class="header-title">{{ headerTitle }}</text>
|
||||||
|
<u-icon :name="isDropdownOpen ? 'arrow-up' : 'arrow-down'" size="28"></u-icon>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 下拉停车场列表 -->
|
||||||
|
<view v-if="isDropdownOpen" class="parking-list">
|
||||||
|
<!-- 搜索框 -->
|
||||||
|
<view class="search-box">
|
||||||
|
<u-icon name="search" size="40" color="#999" class="search-icon" />
|
||||||
|
<input type="text" placeholder="搜索停车场" class="search-input" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 停车场列表 -->
|
||||||
|
<view class="parking-items">
|
||||||
|
<view class="parking-item" v-for="(park, index) in parkingLots" :key="index"
|
||||||
|
@tap="selectParkingLot(park)">
|
||||||
|
<view class="parking-item-left">
|
||||||
|
<view class="parking-spaces">
|
||||||
|
<text class="spaces-label">剩余车位</text>
|
||||||
|
<text class="spaces-number">{{ park.space_count }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="parking-item-right">
|
||||||
|
<text class="parking-name">{{ park.parking_name }}</text>
|
||||||
|
<text class="parking-distance">{{ park.distance }}km</text>
|
||||||
|
<text class="parking-address">{{ park.address }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="parking-selected" v-if="park.isSelected">✔</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="options-list">
|
||||||
|
<view class="overlay" v-if="isDropdownOpen" @tap="toggleDropdown"></view>
|
||||||
|
<!-- 车辆信息 -->
|
||||||
|
<view class="car-info">
|
||||||
|
<image class="car-image" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/car.png"
|
||||||
|
mode="aspectFit" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 停车场信息 -->
|
||||||
|
<view class="park-info" v-if="headerTitle != '请选择停车场'">
|
||||||
|
<text class="park-name">{{ headerTitle }}</text>
|
||||||
|
<text class="park-type">{{ selectedParkType == 1 ? '地上' : '地下' }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 支付金额 -->
|
||||||
|
<view class="payment-amount">
|
||||||
|
<text class="amount-label">支付金额</text>
|
||||||
|
<text class="amount-value">¥{{ paymentAmount.toFixed(2) }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 选项列表 -->
|
||||||
|
<!-- 选择车牌 -->
|
||||||
|
<view class="option-item" @tap="selectCarPlate">
|
||||||
|
<view v-if="selectedCarPlate" class="option-box">
|
||||||
|
<view class="option-label option-val">{{ selectedCarPlate }}</view>
|
||||||
|
<view class="option-right">
|
||||||
|
<image class="option-image"
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_refresh.png"
|
||||||
|
mode="aspectFit" />
|
||||||
|
<image class="option-image"
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_finish.png"
|
||||||
|
mode="aspectFit" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-else class="option-box">
|
||||||
|
<text class="option-label">请选择车牌</text>
|
||||||
|
<u-icon name="arrow-right" size="30" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 计费规则 -->
|
||||||
|
<view class="option-item" @tap="showPriceRule">
|
||||||
|
<view v-if="monthPrice !== ''" class="option-box">
|
||||||
|
<view class="option-label option-val2">{{ monthPrice + '元/月' }}</view>
|
||||||
|
</view>
|
||||||
|
<view v-else class="option-box">
|
||||||
|
<text class="option-label">计费规则</text>
|
||||||
|
<u-icon name="arrow-right" size="30" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 包月月数 -->
|
||||||
|
<view class="option-item" @tap="selectMonthCount">
|
||||||
|
<view v-if="monthCount" class="option-box">
|
||||||
|
<view class="option-label option-val">{{ monthCount + '个月' }}</view>
|
||||||
|
<view class="option-right">
|
||||||
|
<image class="option-image"
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_refresh.png"
|
||||||
|
mode="aspectFit" />
|
||||||
|
<image class="option-image"
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_finish.png"
|
||||||
|
mode="aspectFit" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-else class="option-box">
|
||||||
|
<text class="option-label">包月月数</text>
|
||||||
|
<u-icon name="arrow-right" size="30" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 开始时间 -->
|
||||||
|
<view class="option-item">
|
||||||
|
<view class="option-box">
|
||||||
|
<text class="option-label">开始时间</text>
|
||||||
|
<text class="option-value">{{ startTime }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 结束时间 -->
|
||||||
|
<view class="option-item">
|
||||||
|
<view class="option-box">
|
||||||
|
<text class="option-label">结束时间</text>
|
||||||
|
<text class="option-value">{{ endTime || '--年--月--日' }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 下一步按钮 -->
|
||||||
|
<view class="next-step-btn" @tap="goToNextStep">
|
||||||
|
<text class="next-step-text">下一步</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 订单记录 -->
|
||||||
|
<view class="order-record" @tap="viewOrderRecords">
|
||||||
|
<text class="order-record-text">订单记录>></text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 车牌选择弹窗 -->
|
||||||
|
<u-popup :show="showCarPlatePopup" :round="30" mode="bottom" :closeable="true" close-icon-position="top-right"
|
||||||
|
@close="onCloseCarPlatePopup">
|
||||||
|
<view class="car-plate-popup">
|
||||||
|
<view class="popup-header">
|
||||||
|
<text class="popup-title">选择车牌</text>
|
||||||
|
</view>
|
||||||
|
<view class="car-plate-list">
|
||||||
|
<view class="car-plate-item" v-for="(plate, index) in carPlateList" :key="index"
|
||||||
|
@tap="onSelectCarPlate(plate)" :class="{ 'selected': selectedCarPlate === plate.car_number }">
|
||||||
|
<text class="plate-number">{{ plate.car_number }}</text>
|
||||||
|
<u-icon v-if="selectedCarPlate === plate.car_number" name="checkmark-circle" size="28"
|
||||||
|
color="#ff4219"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
|
||||||
|
<!-- 计费规则弹窗 -->
|
||||||
|
<u-popup :show="billingRulesPopup" :round="30" mode="bottom" :closeable="true" close-icon-position="top-right"
|
||||||
|
@close="onCloseBillingRulesPopup">
|
||||||
|
<view class="car-plate-popup">
|
||||||
|
<view class="popup-header">
|
||||||
|
<text class="popup-title">计费规则</text>
|
||||||
|
</view>
|
||||||
|
<view class="car-plate-list">
|
||||||
|
<view class="car-plate-item" v-for="(rule, index) in billingRulesList" :key="index"
|
||||||
|
@tap="onSelectBillingRule(rule)" :class="{ 'selected': monthPrice === rule.price }">
|
||||||
|
<text class="plate-number">{{ rule.billing_rule_name }}</text>
|
||||||
|
<text class="rule-price">¥{{ rule.month_price }}/月</text>
|
||||||
|
<u-icon v-if="monthPrice === rule.month_price" name="checkmark-circle" size="28"
|
||||||
|
color="#ff4219"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
|
||||||
|
<!-- 包月月数选择弹窗 -->
|
||||||
|
<u-popup :show="showMonthCountPopup" :round="30" mode="bottom" :closeable="true" close-icon-position="top-right"
|
||||||
|
@close="onCloseMonthCountPopup">
|
||||||
|
<view class="car-plate-popup">
|
||||||
|
<view class="popup-header">
|
||||||
|
<text class="popup-title">选择包月月数</text>
|
||||||
|
</view>
|
||||||
|
<view class="car-plate-list">
|
||||||
|
<view class="car-plate-item" v-for="(month, index) in monthList" :key="index"
|
||||||
|
@tap="onSelectMonthCount(month)" :class="{ 'selected': monthCount === month.value }">
|
||||||
|
<text class="plate-number">{{ month.label }}</text>
|
||||||
|
<u-icon v-if="monthCount === month.value" name="checkmark-circle" size="28"
|
||||||
|
color="#ff4219"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
isPhone,
|
||||||
|
picUrl,
|
||||||
|
request,
|
||||||
|
upload,
|
||||||
|
NavgateTo
|
||||||
|
} from '../../../utils';
|
||||||
|
import { apiArr } from '@/api/park.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 页面数据
|
||||||
|
selectedCarPlate: '',
|
||||||
|
monthCount: '',
|
||||||
|
startTime: '',
|
||||||
|
endTime: '',
|
||||||
|
paymentAmount: 2400.00,
|
||||||
|
monthPrice: '',
|
||||||
|
// 下拉列表相关
|
||||||
|
isDropdownOpen: false,
|
||||||
|
headerTitle: '请选择停车场',
|
||||||
|
selectedParkType: '',
|
||||||
|
selectedParkId: '',//停车场id
|
||||||
|
parkingLots: [],
|
||||||
|
// 选中车牌
|
||||||
|
showCarPlatePopup: false,
|
||||||
|
carPlateList: [],
|
||||||
|
selectedCarPlateId: '',//选中的车牌id
|
||||||
|
//计费规则
|
||||||
|
billingRulesPopup: false,
|
||||||
|
billingRulesList: [],
|
||||||
|
selectedBillingRule: '',// 选中的计费规则
|
||||||
|
// 包月月数
|
||||||
|
showMonthCountPopup: false,
|
||||||
|
monthList: Array.from({ length: 12 }, (_, i) => ({
|
||||||
|
value: i + 1,
|
||||||
|
label: (i + 1) + '个月'
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
isAllFilled() {
|
||||||
|
return this.selectedParkId && this.selectedCarPlateId && this.monthCount > 0 && this.startTime;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 切换下拉列表显示状态
|
||||||
|
toggleDropdown() {
|
||||||
|
this.isDropdownOpen = !this.isDropdownOpen;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 选择停车场
|
||||||
|
selectParkingLot(park) {
|
||||||
|
// 取消所有选中状态
|
||||||
|
this.parkingLots.forEach(item => {
|
||||||
|
item.isSelected = false;
|
||||||
|
});
|
||||||
|
// 设置当前选中
|
||||||
|
park.isSelected = true;
|
||||||
|
this.$set(this, 'headerTitle', park.parking_name);
|
||||||
|
this.$set(this, 'selectedParkType', park.space_type);
|
||||||
|
this.selectedParkId = park.id;
|
||||||
|
this.isDropdownOpen = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
selectCarPlate() {
|
||||||
|
this.showCarPlatePopup = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
onCloseCarPlatePopup() {
|
||||||
|
this.showCarPlatePopup = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 选择车牌
|
||||||
|
onSelectCarPlate(plate) {
|
||||||
|
this.selectedCarPlate = plate.car_number;
|
||||||
|
this.selectedCarPlateId = plate.id;
|
||||||
|
this.showCarPlatePopup = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 显示计费规则
|
||||||
|
showPriceRule() {
|
||||||
|
if (!this.selectedParkId) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请选择停车场',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.getBillingRulesList();
|
||||||
|
this.billingRulesPopup = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 关闭计费规则弹窗
|
||||||
|
onCloseBillingRulesPopup() {
|
||||||
|
this.billingRulesPopup = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 选择计费规则
|
||||||
|
onSelectBillingRule(rule) {
|
||||||
|
this.selectedBillingRule = rule.billing_rule_name;
|
||||||
|
this.monthPrice = rule.month_price;
|
||||||
|
this.paymentAmount = this.monthCount * this.monthPrice;
|
||||||
|
this.billingRulesPopup = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 选择包月月数
|
||||||
|
selectMonthCount() {
|
||||||
|
this.showMonthCountPopup = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 关闭包月月数弹窗
|
||||||
|
onCloseMonthCountPopup() {
|
||||||
|
this.showMonthCountPopup = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 选择具体月数
|
||||||
|
onSelectMonthCount(month) {
|
||||||
|
this.monthCount = month.value;
|
||||||
|
|
||||||
|
if (this.startTime) {
|
||||||
|
const startDate = new Date(this.startTime);
|
||||||
|
// 正确计算结束日期:从开始日期加上指定月数
|
||||||
|
const endDate = new Date(startDate);
|
||||||
|
endDate.setMonth(endDate.getMonth() + this.monthCount);
|
||||||
|
// 减去一天,确保是完整的月份
|
||||||
|
endDate.setDate(endDate.getDate() - 1);
|
||||||
|
// 设置为最后一天的 23:59:59
|
||||||
|
endDate.setHours(23, 59, 59, 999);
|
||||||
|
// 使用手动构建日期字符串的方式,避免时区问题
|
||||||
|
const endYear = endDate.getFullYear();
|
||||||
|
const endMonth = String(endDate.getMonth() + 1).padStart(2, '0');
|
||||||
|
const endDay = String(endDate.getDate()).padStart(2, '0');
|
||||||
|
const endHours = String(endDate.getHours()).padStart(2, '0');
|
||||||
|
const endMinutes = String(endDate.getMinutes()).padStart(2, '0');
|
||||||
|
const endSeconds = String(endDate.getSeconds()).padStart(2, '0');
|
||||||
|
this.endTime = `${endYear}-${endMonth}-${endDay} ${endHours}:${endMinutes}:${endSeconds}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.paymentAmount = this.monthCount * this.monthPrice;
|
||||||
|
this.showMonthCountPopup = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 下一步
|
||||||
|
goToNextStep() {
|
||||||
|
if (!this.isAllFilled) {
|
||||||
|
uni.showModal({
|
||||||
|
title: "提示",
|
||||||
|
content: "请填写完整信息",
|
||||||
|
showCancel: false,
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 构建跳转参数
|
||||||
|
// const params = {
|
||||||
|
// headerTitle: this.headerTitle,
|
||||||
|
// selectedParkType: this.selectedParkType,
|
||||||
|
// selectedParkId: this.selectedParkId,
|
||||||
|
// selectedCarPlateId: this.selectedCarPlateId,
|
||||||
|
// selectedCarPlate: this.selectedCarPlate,
|
||||||
|
// monthPrice: this.monthPrice,
|
||||||
|
// monthCount: this.monthCount,
|
||||||
|
// startTime: this.startTime,
|
||||||
|
// endTime: this.endTime,
|
||||||
|
// paymentAmount: this.paymentAmount,
|
||||||
|
// selectedBillingRule: this.selectedBillingRule,
|
||||||
|
// };
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
user_id: uni.getStorageSync('userId'),
|
||||||
|
parking_id: this.selectedParkId,
|
||||||
|
car_id: this.selectedCarPlateId,
|
||||||
|
billing_rules: this.selectedBillingRule,
|
||||||
|
month_count: this.monthCount,
|
||||||
|
total_amount: this.paymentAmount,
|
||||||
|
start_time: this.startTime,
|
||||||
|
end_time: this.endTime,
|
||||||
|
}
|
||||||
|
request(apiArr.monthCardCreate, "POST", params).then((resVal) => {
|
||||||
|
// 根据平台设置不同的trans_type值
|
||||||
|
// 小程序: 71, App: 51
|
||||||
|
const systemInfo = uni.getSystemInfoSync();
|
||||||
|
let trans_type = 51; // 默认App环境
|
||||||
|
|
||||||
|
// 运行时判断是否为小程序环境
|
||||||
|
if (systemInfo.platform === 'devtools' || systemInfo.platform === 'unknown') {
|
||||||
|
trans_type = 71; // 开发工具或未知环境默认为小程序
|
||||||
|
}
|
||||||
|
|
||||||
|
// 条件编译:针对不同平台设置不同值
|
||||||
|
// #ifdef MP
|
||||||
|
trans_type = 71; // 所有小程序平台
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
trans_type = 51; // App平台
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
order_id: resVal.order_id,
|
||||||
|
user_id: uni.getStorageSync('userId'),
|
||||||
|
trans_type: trans_type,
|
||||||
|
headerTitle: this.headerTitle,
|
||||||
|
selectedParkType: this.selectedParkType,
|
||||||
|
selectedParkId: this.selectedParkId,
|
||||||
|
selectedCarPlateId: this.selectedCarPlateId,
|
||||||
|
selectedCarPlate: this.selectedCarPlate,
|
||||||
|
monthPrice: this.monthPrice,
|
||||||
|
monthCount: this.monthCount,
|
||||||
|
startTime: this.startTime,
|
||||||
|
endTime: this.endTime,
|
||||||
|
paymentAmount: this.paymentAmount,
|
||||||
|
selectedBillingRule: this.selectedBillingRule,
|
||||||
|
}
|
||||||
|
|
||||||
|
NavgateTo(`../parkOrderDetail/index?item=${encodeURIComponent(JSON.stringify(params))}`);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 查看订单记录
|
||||||
|
viewOrderRecords() {
|
||||||
|
NavgateTo('../monthlyPaymentOrder/index');
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取停车场列表
|
||||||
|
getParkList() {
|
||||||
|
request(apiArr.parkList, "POST", {}).then((res) => {
|
||||||
|
// 计算每个停车场的距离并添加到对象中
|
||||||
|
this.parkingLots = res.parking_list.map(park => {
|
||||||
|
try {
|
||||||
|
let locationData = uni.getStorageSync('location');
|
||||||
|
if (locationData) {
|
||||||
|
let location = locationData;
|
||||||
|
const userLat = location.lat;
|
||||||
|
const userLng = location.lng;
|
||||||
|
const parkLat = park.lat;
|
||||||
|
const parkLng = park.lng;
|
||||||
|
|
||||||
|
// 使用Haversine公式计算距离(单位:千米)
|
||||||
|
const R = 6371; // 地球半径(千米)
|
||||||
|
const dLat = (parkLat - userLat) * Math.PI / 180;
|
||||||
|
const dLng = (parkLng - userLng) * Math.PI / 180;
|
||||||
|
const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
|
||||||
|
Math.cos(userLat * Math.PI / 180) * Math.cos(parkLat * Math.PI / 180) *
|
||||||
|
Math.sin(dLng / 2) * Math.sin(dLng / 2);
|
||||||
|
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
||||||
|
const distance = (R * c).toFixed(1);
|
||||||
|
|
||||||
|
// 将距离添加到停车场对象中
|
||||||
|
return { ...park, distance };
|
||||||
|
}
|
||||||
|
return park;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('计算停车场距离时出错:', error);
|
||||||
|
return park;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 按照距离从近到远排序
|
||||||
|
this.parkingLots.sort((a, b) => {
|
||||||
|
// 有距离数据的排在前面,无距离数据的排在后面
|
||||||
|
if (a.distance !== undefined && b.distance !== undefined) {
|
||||||
|
return a.distance - b.distance;
|
||||||
|
}
|
||||||
|
if (a.distance !== undefined) return -1;
|
||||||
|
if (b.distance !== undefined) return 1;
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 获取车牌列表
|
||||||
|
getCarPlateList() {
|
||||||
|
request(apiArr.carList, "POST", {}).then((res) => {
|
||||||
|
this.carPlateList = res.car_list;
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取计费规则列表
|
||||||
|
getBillingRulesList() {
|
||||||
|
const params = {
|
||||||
|
parking_id: this.selectedParkId,
|
||||||
|
}
|
||||||
|
request(apiArr.billingRulesList, "POST", params).then((res) => {
|
||||||
|
this.billingRulesList = res.billing_rules_list;
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
// 设置开始时间为今天的 0:00:00
|
||||||
|
const today = new Date();
|
||||||
|
const year = today.getFullYear();
|
||||||
|
const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从0开始,需要+1
|
||||||
|
const day = String(today.getDate()).padStart(2, '0');
|
||||||
|
// 直接构建格式为 'YYYY-MM-DD HH:mm:ss' 的字符串
|
||||||
|
this.startTime = `${year}-${month}-${day} 00:00:00`;
|
||||||
|
|
||||||
|
// 初始化支付金额
|
||||||
|
this.paymentAmount = this.monthCount * this.monthPrice;
|
||||||
|
this.getParkList();
|
||||||
|
this.getCarPlateList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url('./index.css');
|
||||||
|
</style>
|
||||||
152
packages/park/monthlyPaymentOrder/index.css
Normal file
152
packages/park/monthlyPaymentOrder/index.css
Normal file
@ -0,0 +1,152 @@
|
|||||||
|
page{
|
||||||
|
background-color: #f4f7fb;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: #ffffff;
|
||||||
|
height: 100rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
overflow-x: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 订单列表样式 */
|
||||||
|
.order-list {
|
||||||
|
padding: 30rpx;
|
||||||
|
height: 85vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-card {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30rpx;
|
||||||
|
background: linear-gradient(to right, #ffe7e7, #ffffff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-icon {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-number {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-status {
|
||||||
|
font-size: 26rpx;
|
||||||
|
padding: 5rpx 20rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-status.pending {
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-status.using {
|
||||||
|
color: #ff4219;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-status.expired {
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-content {
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-item.amount {
|
||||||
|
padding-top: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-value {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-value {
|
||||||
|
color: #ff4219;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-value.paid {
|
||||||
|
color: #4CD964;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-top: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-button {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
background-color: #d9d9d9;
|
||||||
|
padding: 15rpx 40rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pay-button {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #ff4219;
|
||||||
|
padding: 15rpx 40rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
}
|
||||||
161
packages/park/monthlyPaymentOrder/index.vue
Normal file
161
packages/park/monthlyPaymentOrder/index.vue
Normal file
@ -0,0 +1,161 @@
|
|||||||
|
<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="order-list">
|
||||||
|
<view v-for="(order, index) in orders" :key="index" class="order-card">
|
||||||
|
<view class="order-header">
|
||||||
|
<text class="order-number">订单编号:{{ order.order_sn }}</text>
|
||||||
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/copy.png" class="copy-icon"
|
||||||
|
@click="copyOrderNo(order.order_sn)" />
|
||||||
|
<text class="order-status" :class="{
|
||||||
|
'pending': order.status == 1,
|
||||||
|
'using': order.status == 2,
|
||||||
|
'expired': order.status == 3
|
||||||
|
}">
|
||||||
|
{{ order.status == 1 ? '待支付' : order.status == 2 ? '使用中' : order.status == 3 ? '已过期' : '' }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="order-content">
|
||||||
|
<view class="order-item">
|
||||||
|
<text class="order-label">车场名称</text>
|
||||||
|
<text class="order-value">{{ order.parkingInfo.parking_name }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="order-item">
|
||||||
|
<text class="order-label">车牌号</text>
|
||||||
|
<text class="order-value">{{ order.carInfo.car_no }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="order-item">
|
||||||
|
<text class="order-label">包月月数</text>
|
||||||
|
<text class="order-value">{{ order.month_num }}个月</text>
|
||||||
|
</view>
|
||||||
|
<view class="order-item">
|
||||||
|
<text class="order-label">开始时间</text>
|
||||||
|
<text class="order-value">{{ order.carInfo.enable_time }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="order-item">
|
||||||
|
<text class="order-label">到期时间</text>
|
||||||
|
<text class="order-value">{{ order.carInfo.deadline_time }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="order-item amount">
|
||||||
|
<text class="order-label">订单金额</text>
|
||||||
|
<text class="order-value amount-value">¥{{ order.amount }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 根据订单状态显示不同内容 -->
|
||||||
|
<view v-if="order.status == '2' || order.status === '3'" class="order-item">
|
||||||
|
<text class="order-label">付款时间</text>
|
||||||
|
<text class="order-value">{{ order.pay_time }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-if="order.status == '2'" class="order-item">
|
||||||
|
<text class="order-label">支付状态</text>
|
||||||
|
<text class="order-value paid">已支付</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 待支付订单显示操作按钮 -->
|
||||||
|
<view v-if="order.status == 1" class="order-footer">
|
||||||
|
<view class="cancel-button" @tap="cancelOrder(order)">取消订单</view>
|
||||||
|
<view class="pay-button" @tap="goToPayment(order)">去支付</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
isPhone,
|
||||||
|
picUrl,
|
||||||
|
request,
|
||||||
|
upload,
|
||||||
|
NavgateTo
|
||||||
|
} from '../../../utils';
|
||||||
|
import { apiArr } from '@/api/park.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
categoryList: [
|
||||||
|
{
|
||||||
|
category_name: '全部',
|
||||||
|
category_id: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category_name: '待支付',
|
||||||
|
category_id: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category_name: '使用中',
|
||||||
|
category_id: 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category_name: '已过期',
|
||||||
|
category_id: 3
|
||||||
|
},
|
||||||
|
],
|
||||||
|
selectedTab: 0,
|
||||||
|
orders: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//订单编号复制
|
||||||
|
copyOrderNo(order_sn) {
|
||||||
|
uni.setClipboardData({
|
||||||
|
data: order_sn,
|
||||||
|
success: () => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '复制成功',
|
||||||
|
icon: 'success'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: () => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '复制失败',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
selectTab(index, item) {
|
||||||
|
this.selectedTab = index;
|
||||||
|
this.getOrderList()
|
||||||
|
},
|
||||||
|
// 取消订单
|
||||||
|
cancelOrder(order) {
|
||||||
|
console.log('取消订单:', order);
|
||||||
|
},
|
||||||
|
// 去支付
|
||||||
|
goToPayment(order) {
|
||||||
|
NavgateTo('../parkOrderDetail/index?item=' + JSON.stringify(order));
|
||||||
|
},
|
||||||
|
// 获取订单列表
|
||||||
|
getOrderList() {
|
||||||
|
const params = {
|
||||||
|
user_id: uni.getStorageSync('userId'),
|
||||||
|
order_status: this.selectedTab,
|
||||||
|
}
|
||||||
|
if (params.order_status == 0) {
|
||||||
|
params.order_status = ''
|
||||||
|
}
|
||||||
|
request(apiArr.monthCardOrderList, "POST", params).then(res => {
|
||||||
|
this.orders = res.month_card_order_list;
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.getOrderList()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url('./index.css');
|
||||||
|
</style>
|
||||||
166
packages/park/orderDetail/index.css
Normal file
166
packages/park/orderDetail/index.css
Normal file
@ -0,0 +1,166 @@
|
|||||||
|
/* 订单详情页面样式 */
|
||||||
|
page{
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 容器样式 */
|
||||||
|
.order-detail-container {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 订单状态区域 */
|
||||||
|
.order-status-section {
|
||||||
|
height: 200rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10rpx 50rpx;
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-left {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-title {
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333333;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.park-name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-right {
|
||||||
|
width: 250rpx;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-icon {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 金额信息区域 */
|
||||||
|
.amount-section {
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30rpx 40rpx;
|
||||||
|
border-bottom: 1rpx solid #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-label {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-label2 {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-value {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-value text {
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333333;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-icon {
|
||||||
|
width: 24rpx;
|
||||||
|
height: 24rpx;
|
||||||
|
transition: transform 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 服务信息区域 */
|
||||||
|
.service-section {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333333;
|
||||||
|
padding: 30rpx 40rpx 20rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 25rpx 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item text:last-child {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333333;
|
||||||
|
text-align: right;
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 订单号容器 */
|
||||||
|
.order-number-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex: 1;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-number-container text {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333333;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-icon {
|
||||||
|
width: 36rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 触摸反馈效果 */
|
||||||
|
.amount-item:active,
|
||||||
|
.copy-icon:active {
|
||||||
|
background-color: rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 适配不同屏幕尺寸的响应式调整 */
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
.order-detail-container {
|
||||||
|
max-width: 768px;
|
||||||
|
margin: 0 auto;
|
||||||
|
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
183
packages/park/orderDetail/index.vue
Normal file
183
packages/park/orderDetail/index.vue
Normal file
@ -0,0 +1,183 @@
|
|||||||
|
<template>
|
||||||
|
<view class="order-detail-container">
|
||||||
|
<!-- 订单状态区域 -->
|
||||||
|
<view class="order-status-section">
|
||||||
|
<view class="status-left">
|
||||||
|
<text class="status-title">订单已支付</text>
|
||||||
|
<text class="park-name">{{ orderDetail.parking.parking_name }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="status-right">
|
||||||
|
<image class="success-icon"
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_orderOk.png" mode="aspectFit">
|
||||||
|
</image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 金额信息区域 -->
|
||||||
|
<view class="amount-section">
|
||||||
|
<view class="amount-item" @tap="toggleAmountExpand">
|
||||||
|
<text class="amount-label">实付金额</text>
|
||||||
|
<view class="amount-value">
|
||||||
|
<text>¥{{ orderDetail.pay_method/100 }}</text>
|
||||||
|
<u-icon :name="amountExpanded ? 'arrow-up' : 'arrow-down'" size="28"></u-icon>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="amount-item" v-show="amountExpanded">
|
||||||
|
<text class="amount-label2">订单金额</text>
|
||||||
|
<text>¥{{ orderDetail.pay_method/100 }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 电商服务区域 -->
|
||||||
|
<view class="service-section">
|
||||||
|
<text class="section-title">订单信息</text>
|
||||||
|
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">车牌号码</text>
|
||||||
|
<text>{{ orderDetail.record_info.car_number }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">交易时间</text>
|
||||||
|
<text>{{ orderDetail.pay_time }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="info-item">
|
||||||
|
<!-- <text class="info-label">停车时长</text>
|
||||||
|
<text>{{ calculateParkingDuration() }}</text> -->
|
||||||
|
|
||||||
|
<text class="info-label">计费时长</text>
|
||||||
|
<text>{{ getTime(orderDetail.billing_time) }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">订单类型</text>
|
||||||
|
<text>停车</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">支付方式</text>
|
||||||
|
<text>{{ orderDetail.pay_method == 1 ? '微信' : orderDetail.pay_method == 2 ? '支付宝' : '其他' }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">订单号</text>
|
||||||
|
<view class="order-number-container">
|
||||||
|
<text>{{ orderDetail.order_no }}</text>
|
||||||
|
<image class="copy-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/copy.png"
|
||||||
|
mode="aspectFit" @tap="copyOrderNumber"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
isPhone,
|
||||||
|
picUrl,
|
||||||
|
request,
|
||||||
|
upload,
|
||||||
|
NavgateTo
|
||||||
|
} from '../../../utils';
|
||||||
|
import { apiArr } from '@/api/park.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 控制金额是否展开
|
||||||
|
amountExpanded: false,
|
||||||
|
// 订单详情数据
|
||||||
|
orderDetail: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 切换金额展开状态
|
||||||
|
toggleAmountExpand() {
|
||||||
|
this.amountExpanded = !this.amountExpanded;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 复制订单号
|
||||||
|
copyOrderNumber() {
|
||||||
|
// 使用uni.setClipboardData API复制订单号
|
||||||
|
uni.setClipboardData({
|
||||||
|
data: this.orderDetail.order_no,
|
||||||
|
success: () => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '复制成功',
|
||||||
|
icon: 'success',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: () => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '复制失败',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 计算停车时长
|
||||||
|
getTime(time) {
|
||||||
|
if (!time) {
|
||||||
|
return '0分钟';
|
||||||
|
}
|
||||||
|
const hourVal = Math.floor(time/60);
|
||||||
|
const minuteVal = time%60;
|
||||||
|
if (hourVal === 0) {
|
||||||
|
return `${minuteVal}分钟`;
|
||||||
|
}
|
||||||
|
return `${hourVal}小时${minuteVal}分钟`
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
calculateParkingDuration() {
|
||||||
|
if (!this.orderDetail || !this.orderDetail.record_info) {
|
||||||
|
return '0分钟';
|
||||||
|
}
|
||||||
|
|
||||||
|
const inTime = new Date(this.orderDetail.record_info.in_time);
|
||||||
|
const outTime = new Date(this.orderDetail.record_info.out_time);
|
||||||
|
|
||||||
|
// 计算时间差(毫秒)
|
||||||
|
const diffMs = outTime - inTime;
|
||||||
|
|
||||||
|
// 转换为分钟
|
||||||
|
const diffMinutes = Math.floor(diffMs / (1000 * 60));
|
||||||
|
|
||||||
|
if (diffMinutes < 60) {
|
||||||
|
return `${diffMinutes}分钟`;
|
||||||
|
} else {
|
||||||
|
const hours = Math.floor(diffMinutes / 60);
|
||||||
|
const minutes = diffMinutes % 60;
|
||||||
|
if (minutes === 0) {
|
||||||
|
return `${hours}小时`;
|
||||||
|
} else {
|
||||||
|
return `${hours}小时${minutes}分钟`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
console.log("接收的原始参数:", options);
|
||||||
|
if (options && options.order) {
|
||||||
|
try {
|
||||||
|
// 先解码,再解析
|
||||||
|
const decodedOrder = decodeURIComponent(options.order);
|
||||||
|
this.orderDetail = JSON.parse(decodedOrder);
|
||||||
|
console.log("解析成功:", this.orderDetail);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("解析失败:", err);
|
||||||
|
// 容错处理(如提示加载失败)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url('./index.css');
|
||||||
|
</style>
|
||||||
181
packages/park/parkOrder/index.css
Normal file
181
packages/park/parkOrder/index.css
Normal file
@ -0,0 +1,181 @@
|
|||||||
|
/* 页面基础样式 */
|
||||||
|
page {
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-list {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 月份分组样式 */
|
||||||
|
.month-group {
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-title {
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-expense {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 订单项样式 */
|
||||||
|
.order-item {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||||
|
position: relative;
|
||||||
|
border-bottom: 1rpx solid #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-left {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 订单类型样式 */
|
||||||
|
.order-type {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
.order-type1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-icon {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-type-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-status {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 停车场信息样式 */
|
||||||
|
.order-park-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-park-name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: bold;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-amount {
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 车辆信息样式 */
|
||||||
|
.order-car-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-car-number {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-car-type {
|
||||||
|
font-size: 24rpx;
|
||||||
|
padding: 4rpx 16rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
background-color: #fff1f0;
|
||||||
|
color: #ff4d4f;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 时间样式 */
|
||||||
|
.order-time {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 删除按钮样式 */
|
||||||
|
.delete-button {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 30rpx;
|
||||||
|
right: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 空状态样式 */
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 100rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-icon {
|
||||||
|
width: 200rpx;
|
||||||
|
height: 200rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式调整 */
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
.order-item {
|
||||||
|
padding: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-park-name {
|
||||||
|
font-size: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-amount {
|
||||||
|
font-size: 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 触摸反馈样式 */
|
||||||
|
.order-item:active {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-button:active {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
177
packages/park/parkOrder/index.vue
Normal file
177
packages/park/parkOrder/index.vue
Normal file
@ -0,0 +1,177 @@
|
|||||||
|
<template>
|
||||||
|
<view class="order-list">
|
||||||
|
<!-- 订单按月分组显示 -->
|
||||||
|
<view class="month-group" v-for="monthGroup in orderData" :key="monthGroup.month">
|
||||||
|
<view class="month-header">
|
||||||
|
<text class="month-title">{{ monthGroup.pay_time }}</text>
|
||||||
|
<text class="month-expense">支出¥{{ monthGroup.amount }}元</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 订单列表 -->
|
||||||
|
<view v-if="orderData.length > 0">
|
||||||
|
<view class="order-item" v-for="order in monthGroup.orders" :key="order.id"
|
||||||
|
@tap="viewOrderDetail(order)">
|
||||||
|
<view class="order-left">
|
||||||
|
<view class="order-type">
|
||||||
|
<view class="order-type1">
|
||||||
|
<image class="order-icon"
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_p.png"
|
||||||
|
mode="aspectFit"></image>
|
||||||
|
<text class="order-type-text">停车</text>
|
||||||
|
</view>
|
||||||
|
<text class="order-status">{{ order.status == 1 ? '待支付' : '已支付' }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="order-park-info">
|
||||||
|
<text class="order-park-name">{{ order.record_info.parking_info.parking_name }}</text>
|
||||||
|
<text class="order-amount">¥{{ order.amount.toFixed(2) }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="order-car-info">
|
||||||
|
<text class="order-car-number">{{ order.record_info.car_number }}</text>
|
||||||
|
<text class="order-car-type">{{ order.record_info.car_billing_type == 1 ? '月租车' :
|
||||||
|
(order.record_info.car_billing_type == 2) ? '临时车' : '贵宾车' }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<text class="order-time">{{ order.pay_time }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="delete-button" @tap.stop="deleteOrder(order)">
|
||||||
|
<u-icon name="trash" size="45rpx"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 空状态显示 -->
|
||||||
|
<view class="empty-state" v-if="orderData.length === 0">
|
||||||
|
<image class="empty-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/empty_order.png"
|
||||||
|
mode="aspectFit"></image>
|
||||||
|
<text class="empty-text">暂无停车订单</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
isPhone,
|
||||||
|
picUrl,
|
||||||
|
request,
|
||||||
|
upload,
|
||||||
|
NavgateTo
|
||||||
|
} from '../../../utils';
|
||||||
|
import { apiArr } from '@/api/park.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
orderData: [],
|
||||||
|
page_num: 1,
|
||||||
|
page_size: 20,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 查看订单详情
|
||||||
|
viewOrderDetail(order) {
|
||||||
|
const orderStr = JSON.stringify(order);
|
||||||
|
// 编码特殊字符(如&、?等)
|
||||||
|
const encodedOrder = encodeURIComponent(orderStr);
|
||||||
|
NavgateTo(`../orderDetail/index?order=${encodedOrder}`);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 删除订单方法
|
||||||
|
deleteOrder(order) {
|
||||||
|
const that = this;
|
||||||
|
uni.showModal({
|
||||||
|
title: '确认删除订单',
|
||||||
|
content: '你确定删除订单吗?删除之后你将无法再找回该订单',
|
||||||
|
success: function (res) {
|
||||||
|
if (res.confirm) {
|
||||||
|
const params = {
|
||||||
|
order_id: order.id
|
||||||
|
}
|
||||||
|
request(apiArr.tempParkingOrderDelete, "POST", params).then((res) => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '删除成功',
|
||||||
|
icon: 'success',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
that.getOrderData();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 按月份对订单进行分组的方法
|
||||||
|
groupOrdersByMonth(orderList) {
|
||||||
|
const monthMap = new Map();
|
||||||
|
|
||||||
|
orderList.forEach(order => {
|
||||||
|
let payTime;
|
||||||
|
try {
|
||||||
|
payTime = new Date(order.pay_time);
|
||||||
|
} catch (error) {
|
||||||
|
payTime = new Date(order.pay_time.replace(/T/, ' ').replace(/\+.*$/, ''));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取年月作为分组键
|
||||||
|
const year = payTime.getFullYear();
|
||||||
|
const month = payTime.getMonth() + 1;
|
||||||
|
const monthKey = `${year}-${month.toString().padStart(2, '0')}`;
|
||||||
|
|
||||||
|
// 如果该月份还没有分组,创建一个新分组
|
||||||
|
if (!monthMap.has(monthKey)) {
|
||||||
|
monthMap.set(monthKey, {
|
||||||
|
month: monthKey,
|
||||||
|
pay_time: `${year}年${month}月`,
|
||||||
|
amount: 0,
|
||||||
|
orders: []
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 将当前订单添加到对应月份的分组中
|
||||||
|
const monthGroup = monthMap.get(monthKey);
|
||||||
|
monthGroup.orders.push(order);
|
||||||
|
monthGroup.amount += parseFloat(order.amount || 0);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 将Map转换为数组,并按月份降序排序
|
||||||
|
const groupedArray = Array.from(monthMap.values());
|
||||||
|
groupedArray.sort((a, b) => b.month.localeCompare(a.month));
|
||||||
|
|
||||||
|
// 格式化总金额,保留两位小数
|
||||||
|
groupedArray.forEach(group => {
|
||||||
|
group.amount = group.amount.toFixed(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
return groupedArray;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取订单数据
|
||||||
|
getOrderData() {
|
||||||
|
const params = {
|
||||||
|
page_num: this.page_num,
|
||||||
|
page_size: this.page_size,
|
||||||
|
user_id: uni.getStorageSync('userId')
|
||||||
|
}
|
||||||
|
request(apiArr.tempParkingOrderList, "POST", params).then((res) => {
|
||||||
|
this.orderData = this.groupOrdersByMonth(res.order_list);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
// 页面加载时获取订单数据
|
||||||
|
this.getOrderData();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 页面滑动到底部时触发
|
||||||
|
onReachBottom() {
|
||||||
|
this.page_size += 10;
|
||||||
|
this.getOrderData();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url('./index.css');
|
||||||
|
</style>
|
||||||
151
packages/park/parkOrderDetail/index.css
Normal file
151
packages/park/parkOrderDetail/index.css
Normal file
@ -0,0 +1,151 @@
|
|||||||
|
/* 订单详情页面样式 */
|
||||||
|
page {
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 容器样式 */
|
||||||
|
.order-detail-container {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 支付金额头部 */
|
||||||
|
.payment-header {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-symbol {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-value {
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-status {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #ff4219;
|
||||||
|
padding: 2rpx 15rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
margin-left: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 订单详情内容 */
|
||||||
|
.order-content {
|
||||||
|
padding: 40rpx 40rpx 0 40rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-label {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #a7a7a7;
|
||||||
|
width: 180rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-value {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333333;
|
||||||
|
flex: 1;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.park-type {
|
||||||
|
color: #ff4219;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 支付方式选择 */
|
||||||
|
.payment-method {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 30rpx 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-info-img {
|
||||||
|
width: 50rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-text {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部支付栏 */
|
||||||
|
.bottom-payment {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 30rpx 40rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-top: 1rpx solid #f0f0f0;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-amount {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-label {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-value {
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ff4219;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pay-button {
|
||||||
|
background-color: #ff4219;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 20rpx 60rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pay-text {
|
||||||
|
font-size: 34rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
188
packages/park/parkOrderDetail/index.vue
Normal file
188
packages/park/parkOrderDetail/index.vue
Normal file
@ -0,0 +1,188 @@
|
|||||||
|
<template>
|
||||||
|
<view class="order-detail-container">
|
||||||
|
<!-- 支付金额头部 -->
|
||||||
|
<view class="payment-header">
|
||||||
|
<view class="amount-info">
|
||||||
|
<text class="amount-symbol">¥</text>
|
||||||
|
<text class="amount-value">{{ itemObj.paymentAmount }}</text>
|
||||||
|
<text class="payment-status">待付款</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 订单详情内容 -->
|
||||||
|
<view class="order-content">
|
||||||
|
<!-- 停车场信息 -->
|
||||||
|
<view class="detail-item">
|
||||||
|
<text class="detail-label">停车场</text>
|
||||||
|
<view class="detail-value">
|
||||||
|
<text class="park-type">{{ itemObj.selectedParkType == 1 ? '地上' : '地下' }}</text>
|
||||||
|
<text class="park-name">{{ itemObj.headerTitle }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 车牌号 -->
|
||||||
|
<view class="detail-item">
|
||||||
|
<text class="detail-label">车牌号</text>
|
||||||
|
<text class="detail-value">{{ itemObj.selectedCarPlate }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 开始时间 -->
|
||||||
|
<view class="detail-item">
|
||||||
|
<text class="detail-label">开始时间</text>
|
||||||
|
<text class="detail-value">{{ itemObj.startTime }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 结束时间 -->
|
||||||
|
<view class="detail-item">
|
||||||
|
<text class="detail-label">结束时间</text>
|
||||||
|
<text class="detail-value">{{ itemObj.endTime }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 支付方式选择 -->
|
||||||
|
<view class="payment-method">
|
||||||
|
<view class="method-item">
|
||||||
|
<view class="method-info">
|
||||||
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
|
||||||
|
mode="aspectFit" class="method-info-img"></image>
|
||||||
|
<text class="method-text">微信支付</text>
|
||||||
|
</view>
|
||||||
|
<!-- <view class="payment-select" v-if="selectedPayment === 'wechat'">
|
||||||
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png"
|
||||||
|
mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
|
||||||
|
</view>
|
||||||
|
<view class="payment-select" v-else>
|
||||||
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png"
|
||||||
|
mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
|
||||||
|
</view> -->
|
||||||
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png"
|
||||||
|
mode="aspectFit" style="width: 30rpx; height: 30rpx;"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部支付栏 -->
|
||||||
|
<view class="bottom-payment">
|
||||||
|
<view class="total-amount">
|
||||||
|
<text class="total-label">合计¥</text>
|
||||||
|
<text class="total-value">{{ itemObj.paymentAmount }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="pay-button" @tap="submitPayment">
|
||||||
|
<text class="pay-text">立即支付</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
isPhone,
|
||||||
|
picUrl,
|
||||||
|
request,
|
||||||
|
upload,
|
||||||
|
NavgateTo
|
||||||
|
} from '../../../utils';
|
||||||
|
import { apiArr } from '@/api/park.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
itemObj: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 提交支付
|
||||||
|
submitPayment() {
|
||||||
|
const param = {
|
||||||
|
order_id: this.itemObj.order_id,
|
||||||
|
user_id: uni.getStorageSync('userId'),
|
||||||
|
trans_type: this.itemObj.trans_type,
|
||||||
|
}
|
||||||
|
request(apiArr.monthCardOrderPreorder, "POST", param).then(res => {
|
||||||
|
if (res && res.timeStamp && res.nonceStr && res.package && res.signType && res.paySign) {
|
||||||
|
// 调用微信支付
|
||||||
|
uni.requestPayment({
|
||||||
|
timeStamp: res.timeStamp,
|
||||||
|
nonceStr: res.nonceStr,
|
||||||
|
package: res.package,
|
||||||
|
signType: res.signType,
|
||||||
|
paySign: res.paySign,
|
||||||
|
success: (payRes) => {
|
||||||
|
const params = {
|
||||||
|
order_id: resVal.order_id,
|
||||||
|
}
|
||||||
|
request(apiArr.monthCardOrderQuery, "POST", params).then(res => {
|
||||||
|
this.boxshadow1 = true
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
fail: (payErr) => {
|
||||||
|
uni.showToast({
|
||||||
|
title: payErr.errMsg == 'requestPayment:fail cancel' ? '用户取消支付' : '支付失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
complete: () => {
|
||||||
|
// 支付完成后的回调,无论成功失败都会执行
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
console.error("获取支付参数失败,缺少必要参数")
|
||||||
|
uni.showToast({
|
||||||
|
title: '获取支付信息失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
const rawData = JSON.parse(decodeURIComponent(options.item));
|
||||||
|
|
||||||
|
// 检查数据格式是否为month_card_order_list
|
||||||
|
if (rawData.carInfo) {
|
||||||
|
// 根据平台设置不同的trans_type值
|
||||||
|
// 小程序: 71, App: 51
|
||||||
|
const systemInfo = uni.getSystemInfoSync();
|
||||||
|
let trans_type = 51; // 默认App环境
|
||||||
|
|
||||||
|
// 运行时判断是否为小程序环境
|
||||||
|
if (systemInfo.platform === 'devtools' || systemInfo.platform === 'unknown') {
|
||||||
|
trans_type = 71; // 开发工具或未知环境默认为小程序
|
||||||
|
}
|
||||||
|
|
||||||
|
// 条件编译:针对不同平台设置不同值
|
||||||
|
// #ifdef MP
|
||||||
|
trans_type = 71; // 所有小程序平台
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
trans_type = 51; // App平台
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
this.itemObj = {
|
||||||
|
endTime: rawData.carInfo.deadline_time || '',
|
||||||
|
headerTitle: rawData.parkingInfo.parking_name || '',
|
||||||
|
monthCount: rawData.month_num || 0,
|
||||||
|
monthPrice: rawData.monthly_rental_fee || 0,
|
||||||
|
order_id: rawData.id || 0,
|
||||||
|
paymentAmount: rawData.amount || 0,
|
||||||
|
selectedBillingRule: rawData.billing_rule_id || '',
|
||||||
|
selectedCarPlate: rawData.carInfo.car_no || '',
|
||||||
|
selectedCarPlateId: rawData.carInfo.id || 0,
|
||||||
|
selectedParkId: rawData.parking_id || 0,
|
||||||
|
selectedParkType: rawData.parkingInfo.space_type || 0,
|
||||||
|
startTime: rawData.carInfo.enable_time || '',
|
||||||
|
trans_type: trans_type,
|
||||||
|
user_id: rawData.user_id || 0
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
// 使用原始数据格式
|
||||||
|
this.itemObj = rawData;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url('./index.css');
|
||||||
|
</style>
|
||||||
485
packages/park/temporaryOrder/index.css
Normal file
485
packages/park/temporaryOrder/index.css
Normal file
@ -0,0 +1,485 @@
|
|||||||
|
page {
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monthly-payment-container {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
background-color: #fff3f1;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
height: 45rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333333;
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-arrow {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 搜索框样式 */
|
||||||
|
.search-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
margin: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333333;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 下拉停车场列表样式 */
|
||||||
|
.parking-list {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
border-radius: 0 0 40rpx 40rpx;
|
||||||
|
position: fixed;
|
||||||
|
top: 80rpx;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 90rpx;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 98;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-items {
|
||||||
|
max-height: 600rpx;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 25rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-item-right {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-name {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-distance {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-address {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
display: block;
|
||||||
|
margin-top: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-item-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-selected {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #ff4219;
|
||||||
|
position: relative;
|
||||||
|
right: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-spaces {
|
||||||
|
background-color: #ffeeee;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 8rpx 16rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spaces-label {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #ff4219;
|
||||||
|
margin-bottom: 4rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spaces-number {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ff4219;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 车辆选择器 */
|
||||||
|
.changeCar {
|
||||||
|
background-color: #fff;
|
||||||
|
border-bottom: 1rpx solid #eeeeee;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.car-selector {
|
||||||
|
width: 27%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-car-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 车辆下拉列表样式 */
|
||||||
|
.car-dropdown {
|
||||||
|
width: 33%;
|
||||||
|
height: 600rpx;
|
||||||
|
overflow-y: auto;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-top: 1rpx solid #f0f0f0;
|
||||||
|
position: absolute;
|
||||||
|
top: 100rpx;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 999;
|
||||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||||||
|
margin-left: 50rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-arrow {
|
||||||
|
position: absolute;
|
||||||
|
top: -8px;
|
||||||
|
left: 20%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 8px solid transparent;
|
||||||
|
border-right: 8px solid transparent;
|
||||||
|
border-bottom: 8px solid #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 车辆选项样式 */
|
||||||
|
.car-item {
|
||||||
|
padding: 30rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.car-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.car-item:active {
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectColorBox {
|
||||||
|
width: 95%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin: 30rpx auto 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectColor {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color {
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 弹窗样式 */
|
||||||
|
.payIpt {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 30rpx 30rpx 0 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tit {
|
||||||
|
font-size: 32rpx;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
font-weight: bold;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 颜色列表样式 */
|
||||||
|
.color-list {
|
||||||
|
max-height: 500rpx;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-item {
|
||||||
|
font-size: 28rpx;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-item.active {
|
||||||
|
color: #ff4016;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部按钮样式 */
|
||||||
|
.popup-footer {
|
||||||
|
display: flex;
|
||||||
|
border-top: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn,
|
||||||
|
.confirm-btn {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn {
|
||||||
|
color: #666;
|
||||||
|
border-right: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-btn {
|
||||||
|
color: #ff4016;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 查询停车费 */
|
||||||
|
.order-record {
|
||||||
|
text-align: center;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
border-top: 1rpx solid #eeeeee;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-record-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ff3f11;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 停车费展示部分样式 */
|
||||||
|
.cost-container {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 40rpx 30rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.not-found{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cost-image{
|
||||||
|
width: 100%;
|
||||||
|
height: 150rpx;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cost-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cost-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cost-title2 {
|
||||||
|
color: #999999;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cost-amount {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #ff3f11;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-symbol {
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-number {
|
||||||
|
}
|
||||||
|
|
||||||
|
.cost-info {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice {
|
||||||
|
background-color: #fff8f4;
|
||||||
|
padding: 20rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
text-align: center;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice-text2 {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-methods {
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-item-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-icon {
|
||||||
|
width: 50rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-name {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-selected {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
border: 3rpx solid #ff3f11;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
right: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-selected::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 15rpx;
|
||||||
|
height: 15rpx;
|
||||||
|
background-color: #ff3f11;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pay-button {
|
||||||
|
width: 70%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: #ff370b;
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
}
|
||||||
589
packages/park/temporaryOrder/index.vue
Normal file
589
packages/park/temporaryOrder/index.vue
Normal file
@ -0,0 +1,589 @@
|
|||||||
|
<template>
|
||||||
|
<view class="monthly-payment-container">
|
||||||
|
<!-- 顶部标题 -->
|
||||||
|
<view class="header" @tap="toggleDropdown">
|
||||||
|
<text class="header-title">{{ headerTitle }}</text>
|
||||||
|
<u-icon :name="isDropdownOpen ? 'arrow-up' : 'arrow-down'" size="28"></u-icon>
|
||||||
|
</view>
|
||||||
|
<!-- 下拉停车场列表 -->
|
||||||
|
<view v-if="isDropdownOpen" class="parking-list">
|
||||||
|
<!-- 搜索框 -->
|
||||||
|
<view class="search-box">
|
||||||
|
<u-icon name="search" size="40" color="#999" class="search-icon" />
|
||||||
|
<input type="text" placeholder="搜索停车场" class="search-input" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 停车场列表 -->
|
||||||
|
<view class="parking-items">
|
||||||
|
<view class="parking-item" v-for="(park, index) in parkingLots" :key="index"
|
||||||
|
@tap="selectParkingLot(park)">
|
||||||
|
<view class="parking-item-left">
|
||||||
|
<view class="parking-spaces">
|
||||||
|
<text class="spaces-label">剩余车位</text>
|
||||||
|
<text class="spaces-number">{{ park.space_count }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="parking-item-right">
|
||||||
|
<text class="parking-name">{{ park.parking_name }}</text>
|
||||||
|
<text class="parking-distance">{{ park.distance }}km</text>
|
||||||
|
<text class="parking-address">{{ park.address }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="parking-selected" v-if="park.isSelected">✔</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view>
|
||||||
|
<view class="overlay" v-if="isDropdownOpen" />
|
||||||
|
<!-- 车辆选择区域 -->
|
||||||
|
<view class="changeCar">
|
||||||
|
<view class="car-selector" @tap="toggleCarDropdown">
|
||||||
|
<text class="selected-car-text">{{ selectedCar || '选择车辆' }}</text>
|
||||||
|
<u-icon :name="isCarDropdownOpen ? 'arrow-up' : 'arrow-down'" size="28"></u-icon>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 车辆下拉列表 -->
|
||||||
|
<view v-if="isCarDropdownOpen" class="car-dropdown">
|
||||||
|
<view class="dropdown-arrow"></view>
|
||||||
|
<view class="car-item" v-for="(car, index) in cars" :key="index" @click="selectCar(car)">
|
||||||
|
{{ car.car_number }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="container">
|
||||||
|
<view class="title">请输入车牌号码</view>
|
||||||
|
<car-number-input @numberInputResult="numberInputResult" :defaultStr="defaultNum"
|
||||||
|
ref="carNumberInput" />
|
||||||
|
<view class="selectColorBox" @click="show = true">
|
||||||
|
<view>车牌颜色</view>
|
||||||
|
<view class="selectColor">
|
||||||
|
<view class="color">{{ color }}</view>
|
||||||
|
<u-icon name="arrow-right" size="25"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="order-record" @tap="selectCost">
|
||||||
|
<text class="order-record-text">查询停车费>></text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 停车费展示部分 -->
|
||||||
|
<view v-if="showCost1">
|
||||||
|
<view v-if="payStatus === 1" class="cost-container">
|
||||||
|
<view>
|
||||||
|
<image class="cost-image"
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_orderLoading.png"
|
||||||
|
mode="aspectFit" />
|
||||||
|
</view>
|
||||||
|
<view class="cost-header">
|
||||||
|
<text class="cost-title">{{ parkingLotName }} <text class="cost-title2">待支付</text></text>
|
||||||
|
</view>
|
||||||
|
<view class="cost-amount">
|
||||||
|
<text class="amount-symbol">¥</text>
|
||||||
|
<text class="amount-number">{{ costAmount }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="cost-info">
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">车牌号:</text>
|
||||||
|
<text class="info-value">{{ currentCarNumber }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">进场时间:</text>
|
||||||
|
<text class="info-value">{{ entryTime }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">计费时间:</text>
|
||||||
|
<text class="info-value">{{ billingTime }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="notice">
|
||||||
|
<!-- 未支付状态显示 -->
|
||||||
|
<text class="notice-text">⚠️ 请于付款后{{ feeOutTime }}分钟内离场否则将加收停车费</text>
|
||||||
|
</view>
|
||||||
|
<view class="payment-methods">
|
||||||
|
<view class="payment-item" :class="{ 'selected': paymentMethod === 'wechat' }"
|
||||||
|
@tap="selectPayment('wechat')">
|
||||||
|
<view class="payment-item-content">
|
||||||
|
<image
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
|
||||||
|
mode="aspectFit" class="payment-icon"></image>
|
||||||
|
<text class="payment-name">微信支付</text>
|
||||||
|
</view>
|
||||||
|
<view v-if="paymentMethod === 'wechat'" class="payment-selected"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="pay-button" @tap="confirmPayment">立即付款</view>
|
||||||
|
</view>
|
||||||
|
<view v-else class="cost-container notice-text2">
|
||||||
|
<view>
|
||||||
|
<image class="cost-image"
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_orderLoading.png"
|
||||||
|
mode="aspectFit" />
|
||||||
|
</view>
|
||||||
|
<span v-if="!isTimeout">⚠️ 支付成功,请于{{ countdownTime }}内离场否则将加收停车费</span>
|
||||||
|
<span v-else>⚠️ 您已超时未离场,已重新计费</span>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="showCost2" class="cost-container not-found">
|
||||||
|
未找到停车记录
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 选择车牌颜色 -->
|
||||||
|
<u-popup :show="show" :round="30" mode="bottom" @close="onClose">
|
||||||
|
<view class="payIpt">
|
||||||
|
<view class="tit">选择车牌颜色</view>
|
||||||
|
<!-- 颜色选择列表 -->
|
||||||
|
<scroll-view class="color-list" scroll-y>
|
||||||
|
<view class="color-item" :class="{ 'active': selectedColorIndex === index }"
|
||||||
|
v-for="(item, index) in colorOptions" :key="index" @click="selectColor(index)">
|
||||||
|
{{ item }}
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<!-- 底部按钮 -->
|
||||||
|
<view class="popup-footer">
|
||||||
|
<view class="cancel-btn" @click="onClose">取消</view>
|
||||||
|
<view class="confirm-btn" @click="confirmColor">确定</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
isPhone,
|
||||||
|
picUrl,
|
||||||
|
request,
|
||||||
|
upload,
|
||||||
|
NavgateTo
|
||||||
|
} from '../../../utils';
|
||||||
|
import { apiArr } from '@/api/park.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isDropdownOpen: false,
|
||||||
|
headerTitle: '请选择停车场',
|
||||||
|
parkingLots: [],
|
||||||
|
|
||||||
|
defaultNum: '',
|
||||||
|
color: '请选择',
|
||||||
|
show: false,
|
||||||
|
// 颜色选项列表
|
||||||
|
colorOptions: ['蓝牌', '黄牌', '黑牌', '白牌', '绿牌', '渐变绿底黑字', '黄绿双拼底黑字'],
|
||||||
|
// 当前选中的颜色索引
|
||||||
|
selectedColorIndex: -1,
|
||||||
|
|
||||||
|
// 车辆选择相关数据
|
||||||
|
isCarDropdownOpen: false,
|
||||||
|
selectedCar: '',
|
||||||
|
cars: [],
|
||||||
|
|
||||||
|
// 停车费相关数据
|
||||||
|
showCost1: false,
|
||||||
|
showCost2: false,
|
||||||
|
parkingLotName: '',
|
||||||
|
costAmount: '',
|
||||||
|
currentCarNumber: '',
|
||||||
|
feeOutTime: '',//免费出场时间
|
||||||
|
entryTime: '',
|
||||||
|
billingTime: '',
|
||||||
|
paymentMethod: 'wechat',
|
||||||
|
// 定时器ID,用于清除定时器
|
||||||
|
timerId: null,
|
||||||
|
|
||||||
|
// 支付状态相关数据
|
||||||
|
payStatus: 0,
|
||||||
|
payTime: '',
|
||||||
|
countdownTime: '',
|
||||||
|
isTimeout: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.getParkList();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 在组件卸载时清除定时器
|
||||||
|
onUnload() {
|
||||||
|
if (this.timerId) {
|
||||||
|
clearInterval(this.timerId);
|
||||||
|
this.timerId = null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 切换下拉列表显示状态
|
||||||
|
toggleDropdown() {
|
||||||
|
this.isCarDropdownOpen = false
|
||||||
|
this.isDropdownOpen = !this.isDropdownOpen;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 选择停车场
|
||||||
|
selectParkingLot(park) {
|
||||||
|
// 先取消所有选中状态
|
||||||
|
this.parkingLots.forEach(item => {
|
||||||
|
item.isSelected = false;
|
||||||
|
});
|
||||||
|
// 设置当前选中
|
||||||
|
park.isSelected = true;
|
||||||
|
// 更新头部标题
|
||||||
|
this.$set(this, 'headerTitle', park.parking_name);
|
||||||
|
// 关闭下拉列表
|
||||||
|
this.isDropdownOpen = false;
|
||||||
|
},
|
||||||
|
numberInputResult(e) {
|
||||||
|
this.defaultNum = e;
|
||||||
|
|
||||||
|
// 当车牌数据改变时,隐藏停车费显示
|
||||||
|
this.showCost1 = false;
|
||||||
|
this.showCost2 = false;
|
||||||
|
|
||||||
|
// 使用$nextTick确保DOM更新完成后再尝试操作组件
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (this.$refs.carNumberInput) {
|
||||||
|
// 直接更新子组件的inputList数组
|
||||||
|
const valList = e.split("");
|
||||||
|
|
||||||
|
if (e == '其他车辆') {
|
||||||
|
for (let i = 0; i < 8; i++) {
|
||||||
|
this.$refs.carNumberInput.inputList[i] = ' ';
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
for (let i in valList) {
|
||||||
|
this.$refs.carNumberInput.inputList[i] = valList[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 强制子组件更新
|
||||||
|
this.$refs.carNumberInput.$forceUpdate();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
this.show = false;
|
||||||
|
},
|
||||||
|
// 更新计费时间
|
||||||
|
updateBillingTime() {
|
||||||
|
const entryDateTime = new Date(this.entryTime);
|
||||||
|
const currentDateTime = new Date();
|
||||||
|
const diff = currentDateTime - entryDateTime;
|
||||||
|
|
||||||
|
// 计算天、时、分、秒
|
||||||
|
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||||
|
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||||
|
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
||||||
|
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
|
||||||
|
|
||||||
|
// 格式化时间显示
|
||||||
|
let timeStr = '';
|
||||||
|
if (days > 0) {
|
||||||
|
timeStr += days + '天';
|
||||||
|
}
|
||||||
|
if (hours > 0 || days > 0) {
|
||||||
|
timeStr += hours + '时';
|
||||||
|
}
|
||||||
|
if (minutes > 0 || hours > 0 || days > 0) {
|
||||||
|
timeStr += minutes + '分';
|
||||||
|
}
|
||||||
|
timeStr += seconds + '秒';
|
||||||
|
|
||||||
|
this.billingTime = timeStr;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 更新倒计时
|
||||||
|
updateCountdown() {
|
||||||
|
const payDateTime = new Date(this.payTime);
|
||||||
|
const currentDateTime = new Date();
|
||||||
|
// 计算支付时间加上免费出场时间后的过期时间
|
||||||
|
const expireDateTime = new Date(payDateTime.getTime() + parseInt(this.feeOutTime) * 60 * 1000);
|
||||||
|
|
||||||
|
// 判断是否已超时
|
||||||
|
if (currentDateTime > expireDateTime) {
|
||||||
|
this.isTimeout = true;
|
||||||
|
// 清除定时器,不再更新倒计时
|
||||||
|
if (this.timerId) {
|
||||||
|
clearInterval(this.timerId);
|
||||||
|
this.timerId = null;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 计算剩余时间(秒)
|
||||||
|
const remainingSeconds = Math.floor((expireDateTime - currentDateTime) / 1000);
|
||||||
|
// 格式化剩余时间为分:秒
|
||||||
|
const minutes = Math.floor(remainingSeconds / 60);
|
||||||
|
const seconds = remainingSeconds % 60;
|
||||||
|
this.countdownTime = `${minutes}分${seconds}秒`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 选择颜色
|
||||||
|
selectColor(index) {
|
||||||
|
this.selectedColorIndex = index;
|
||||||
|
},
|
||||||
|
// 确认选择的颜色
|
||||||
|
confirmColor() {
|
||||||
|
if (this.selectedColorIndex !== -1) {
|
||||||
|
this.color = this.colorOptions[this.selectedColorIndex];
|
||||||
|
}
|
||||||
|
this.show = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 切换车辆下拉列表显示状态
|
||||||
|
toggleCarDropdown() {
|
||||||
|
this.isCarDropdownOpen = !this.isCarDropdownOpen;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 选择车辆
|
||||||
|
selectCar(car) {
|
||||||
|
this.selectedCar = car.car_number;
|
||||||
|
this.isCarDropdownOpen = false;
|
||||||
|
if (car.car_number == '其他车辆') {
|
||||||
|
NavgateTo('../addCar/index')
|
||||||
|
}
|
||||||
|
this.numberInputResult(car.car_number)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 查询停车费
|
||||||
|
selectCost() {
|
||||||
|
const selectedParkingLot = this.parkingLots.find(park => park.isSelected);
|
||||||
|
if (!selectedParkingLot) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请先选择停车场',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!this.defaultNum) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入车牌号',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const params = {
|
||||||
|
parking_id: selectedParkingLot.id,
|
||||||
|
car_number: this.defaultNum,
|
||||||
|
}
|
||||||
|
request(apiArr.tempParkingInfo, "POST", params).then((res) => {
|
||||||
|
if (res) {
|
||||||
|
this.parkingLotName = res.parking.parking_name;
|
||||||
|
this.costAmount = res.fee_amount;
|
||||||
|
this.currentCarNumber = res.car_number;
|
||||||
|
this.entryTime = res.in_time;
|
||||||
|
this.feeOutTime = res.parking.free_out_time
|
||||||
|
// 清除之前可能存在的定时器
|
||||||
|
if (this.timerId) {
|
||||||
|
clearInterval(this.timerId);
|
||||||
|
this.timerId = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置支付状态相关数据
|
||||||
|
this.payStatus = res.pay_status || 0;
|
||||||
|
this.payTime = res.pay_time || '';
|
||||||
|
this.countdownTime = '';
|
||||||
|
this.isTimeout = false;
|
||||||
|
|
||||||
|
// 如果是已支付状态(pay_status=1)
|
||||||
|
if (this.payStatus === 2 && this.payTime) {
|
||||||
|
// 计算并显示倒计时
|
||||||
|
this.updateCountdown();
|
||||||
|
// 设置定时器,每秒更新一次倒计时
|
||||||
|
this.timerId = setInterval(() => {
|
||||||
|
this.updateCountdown();
|
||||||
|
}, 1000);
|
||||||
|
} else {
|
||||||
|
if (res.car_billing_type == 1) {
|
||||||
|
this.billingTime = '月租车';
|
||||||
|
} else if (res.car_billing_type == 2) {
|
||||||
|
this.billingTime = '临时车';
|
||||||
|
} else {
|
||||||
|
// 计算并实时更新进场时间到现在的时长
|
||||||
|
this.updateBillingTime();
|
||||||
|
// 设置定时器,每秒更新一次
|
||||||
|
this.timerId = setInterval(() => {
|
||||||
|
this.updateBillingTime();
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.showCost1 = true;
|
||||||
|
} else {
|
||||||
|
this.showCost2 = true;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 选择支付方式
|
||||||
|
selectPayment(method) {
|
||||||
|
this.paymentMethod = method;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 确认付款
|
||||||
|
confirmPayment() {
|
||||||
|
const selectedParkingLot = this.parkingLots.find(park => park.isSelected);
|
||||||
|
const params = {
|
||||||
|
car_number: this.defaultNum,
|
||||||
|
parking_id: selectedParkingLot.id,
|
||||||
|
user_id: uni.getStorageSync('userId'),
|
||||||
|
}
|
||||||
|
request(apiArr.tempParkingCreate, "POST", params).then((resVal) => {
|
||||||
|
// 根据平台设置不同的trans_type值
|
||||||
|
// 小程序: 71, App: 51
|
||||||
|
const systemInfo = uni.getSystemInfoSync();
|
||||||
|
let trans_type = 51; // 默认App环境
|
||||||
|
|
||||||
|
// 运行时判断是否为小程序环境
|
||||||
|
if (systemInfo.platform === 'devtools' || systemInfo.platform === 'unknown') {
|
||||||
|
trans_type = 71; // 开发工具或未知环境默认为小程序
|
||||||
|
}
|
||||||
|
|
||||||
|
// 条件编译:针对不同平台设置不同值
|
||||||
|
// #ifdef MP
|
||||||
|
trans_type = 71; // 所有小程序平台
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
trans_type = 51; // App平台
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
const param = {
|
||||||
|
order_id: resVal.order_id,
|
||||||
|
user_id: uni.getStorageSync('userId'),
|
||||||
|
trans_type: trans_type
|
||||||
|
}
|
||||||
|
request(apiArr.tempParkingOrderPreorder, "POST", param).then(res => {
|
||||||
|
if (res && res.timeStamp && res.nonceStr && res.package && res.signType && res.paySign) {
|
||||||
|
// 调用微信支付
|
||||||
|
uni.requestPayment({
|
||||||
|
timeStamp: res.timeStamp,
|
||||||
|
nonceStr: res.nonceStr,
|
||||||
|
package: res.package,
|
||||||
|
signType: res.signType,
|
||||||
|
paySign: res.paySign,
|
||||||
|
success: (payRes) => {
|
||||||
|
// 重置页面状态为加载时的默认状态
|
||||||
|
// 清除定时器
|
||||||
|
if (this.timerId) {
|
||||||
|
clearInterval(this.timerId);
|
||||||
|
this.timerId = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置停车费相关状态
|
||||||
|
this.showCost1 = false;
|
||||||
|
this.showCost2 = false;
|
||||||
|
this.parkingLotName = '';
|
||||||
|
this.costAmount = '';
|
||||||
|
this.currentCarNumber = '';
|
||||||
|
this.entryTime = '';
|
||||||
|
this.billingTime = '';
|
||||||
|
this.feeOutTime = '';
|
||||||
|
|
||||||
|
// 重置支付相关状态
|
||||||
|
this.paymentMethod = 'wechat';
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
order_id: resVal.order_id,
|
||||||
|
}
|
||||||
|
request(apiArr.tempParkingOrderQuery, "POST", params).then(res => {
|
||||||
|
this.selectCost()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
fail: (payErr) => {
|
||||||
|
const params = {
|
||||||
|
order_id: resVal.order_id
|
||||||
|
}
|
||||||
|
request(apiArr.tempParkingOrderDelete, "POST", params).then((res) => {
|
||||||
|
})
|
||||||
|
uni.showToast({
|
||||||
|
title: payErr.errMsg == 'requestPayment:fail cancel' ? '用户取消支付' : '支付失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
const params = {
|
||||||
|
order_id: resVal.order_id
|
||||||
|
}
|
||||||
|
request(apiArr.tempParkingOrderDelete, "POST", params).then((res) => {
|
||||||
|
})
|
||||||
|
console.error("获取支付参数失败,缺少必要参数")
|
||||||
|
uni.showToast({
|
||||||
|
title: '获取支付信息失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}).catch(error => {
|
||||||
|
console.log("111"); // 请求创建订单失败时输出111
|
||||||
|
console.error("创建临时停车订单失败", error);
|
||||||
|
uni.showToast({
|
||||||
|
title: '创建订单失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 获取车辆列表
|
||||||
|
getCarList() {
|
||||||
|
const params = {
|
||||||
|
user_id: uni.getStorageSync('userId')
|
||||||
|
}
|
||||||
|
request(apiArr.carList, "POST", params).then((res) => {
|
||||||
|
this.cars = res.car_list;
|
||||||
|
this.cars.push({
|
||||||
|
car_number: '其他车辆'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 获取停车场列表
|
||||||
|
getParkList() {
|
||||||
|
request(apiArr.parkList, "POST", {}).then((res) => {
|
||||||
|
// 计算每个停车场的距离并添加到对象中
|
||||||
|
this.parkingLots = res.parking_list.map(park => {
|
||||||
|
try {
|
||||||
|
let locationData = uni.getStorageSync('location');
|
||||||
|
if (locationData) {
|
||||||
|
let location = locationData;
|
||||||
|
const userLat = location.lat;
|
||||||
|
const userLng = location.lng;
|
||||||
|
const parkLat = park.lat;
|
||||||
|
const parkLng = park.lng;
|
||||||
|
|
||||||
|
// 使用Haversine公式计算距离(单位:千米)
|
||||||
|
const R = 6371; // 地球半径(千米)
|
||||||
|
const dLat = (parkLat - userLat) * Math.PI / 180;
|
||||||
|
const dLng = (parkLng - userLng) * Math.PI / 180;
|
||||||
|
const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
|
||||||
|
Math.cos(userLat * Math.PI / 180) * Math.cos(parkLat * Math.PI / 180) *
|
||||||
|
Math.sin(dLng / 2) * Math.sin(dLng / 2);
|
||||||
|
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
||||||
|
const distance = (R * c).toFixed(1);
|
||||||
|
|
||||||
|
// 将距离添加到停车场对象中
|
||||||
|
return { ...park, distance };
|
||||||
|
}
|
||||||
|
return park;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('计算停车场距离时出错:', error);
|
||||||
|
return park;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 按照距离从近到远排序
|
||||||
|
this.parkingLots.sort((a, b) => {
|
||||||
|
// 有距离数据的排在前面,无距离数据的排在后面
|
||||||
|
if (a.distance !== undefined && b.distance !== undefined) {
|
||||||
|
return a.distance - b.distance;
|
||||||
|
}
|
||||||
|
if (a.distance !== undefined) return -1;
|
||||||
|
if (b.distance !== undefined) return 1;
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
this.getCarList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url('./index.css');
|
||||||
|
</style>
|
||||||
@ -16,15 +16,15 @@
|
|||||||
<view class="label">选择运营商</view>
|
<view class="label">选择运营商</view>
|
||||||
<view class="operator-list">
|
<view class="operator-list">
|
||||||
<view class="operator-item" :class="{ 'active': selectedOperator === 'chinaMobile' }" @click="selectOperator('chinaMobile')">
|
<view class="operator-item" :class="{ 'active': selectedOperator === 'chinaMobile' }" @click="selectOperator('chinaMobile')">
|
||||||
<image class="operator-icon" src="http://localhost:8080/payTheFees_yidong.png" mode="aspectFit" />
|
<image class="operator-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/payTheFees_yidong.png" mode="aspectFit" />
|
||||||
<text>移动</text>
|
<text>移动</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="operator-item" :class="{ 'active': selectedOperator === 'chinaUnicom' }" @click="selectOperator('chinaUnicom')">
|
<view class="operator-item" :class="{ 'active': selectedOperator === 'chinaUnicom' }" @click="selectOperator('chinaUnicom')">
|
||||||
<image class="operator-icon" src="http://localhost:8080/payTheFees_liantong.png" mode="aspectFit" />
|
<image class="operator-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/payTheFees_liantong.png" mode="aspectFit" />
|
||||||
<text>中国联通</text>
|
<text>中国联通</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="operator-item" :class="{ 'active': selectedOperator === 'chinaTelecom' }" @click="selectOperator('chinaTelecom')">
|
<view class="operator-item" :class="{ 'active': selectedOperator === 'chinaTelecom' }" @click="selectOperator('chinaTelecom')">
|
||||||
<image class="operator-icon" src="http://localhost:8080/payTheFees_dianxin.png" mode="aspectFit" />
|
<image class="operator-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/payTheFees_dianxin.png" mode="aspectFit" />
|
||||||
<text>中国电信</text>
|
<text>中国电信</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -118,8 +118,8 @@ export default {
|
|||||||
handlePay() {
|
handlePay() {
|
||||||
if (this.isFormValid) {
|
if (this.isFormValid) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '缴费成功',
|
title: '该功能暂未实现',
|
||||||
icon: 'success'
|
icon: 'none'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -138,11 +138,11 @@ export default {
|
|||||||
getOperatorIcon() {
|
getOperatorIcon() {
|
||||||
switch (this.selectedOperator) {
|
switch (this.selectedOperator) {
|
||||||
case 'chinaMobile':
|
case 'chinaMobile':
|
||||||
return 'http://localhost:8080/payTheFees_yidong.png';
|
return 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/payTheFees_yidong.png';
|
||||||
case 'chinaUnicom':
|
case 'chinaUnicom':
|
||||||
return 'http://localhost:8080/payTheFees_liantong.png';
|
return 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/payTheFees_liantong.png';
|
||||||
case 'chinaTelecom':
|
case 'chinaTelecom':
|
||||||
return 'http://localhost:8080/payTheFees_dianxin.png';
|
return 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/payTheFees_dianxin.png';
|
||||||
default:
|
default:
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,52 +1,52 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<div class="row">
|
<view class="row">
|
||||||
<div class="row_label"><span>*</span>收货人</div>
|
<view class="row_label"><span>*</span>收货人</view>
|
||||||
<div class="row_con">
|
<view class="row_con">
|
||||||
<u--input placeholder="请输入姓名" clearable border="none" v-model="name"></u--input>
|
<u--input placeholder="请输入姓名" clearable border="none" v-model="name"></u--input>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="row">
|
<view class="row">
|
||||||
<div class="row_label"><span>*</span>手机号</div>
|
<view class="row_label"><span>*</span>手机号</view>
|
||||||
<div class="row_con">
|
<view class="row_con">
|
||||||
<u--input type="number" placeholder="请输入手机号" clearable border="none" v-model="phone" ></u--input>
|
<u--input type="number" placeholder="请输入手机号" clearable border="none" v-model="phone" ></u--input>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="tabList">
|
<view class="tabList">
|
||||||
<div class="tabItem" :class="{ 'active': tab == 0 }" @click="changeTab(0)">地图选址</div>
|
<view class="tabItem" :class="{ 'active': tab == 0 }" @click="changeTab(0)">地图选址</view>
|
||||||
<div class="tabItem" :class="{ 'active': tab == 1 }" @click="changeTab(1)">地区选择</div>
|
<view class="tabItem" :class="{ 'active': tab == 1 }" @click="changeTab(1)">地区选择</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="tabItems" v-if="tab == 0">
|
<view class="tabItems" v-if="tab == 0">
|
||||||
<div class="row">
|
<view class="row">
|
||||||
<div class="row_label">地址</div>
|
<view class="row_label">地址</view>
|
||||||
<div class="row_con">
|
<view class="row_con">
|
||||||
<div class="choseAddress" @click="chooseAddress">
|
<view class="choseAddress" @click="chooseAddress">
|
||||||
<text v-if="showOrientation">请选择地址</text>
|
<text v-if="showOrientation">请选择地址</text>
|
||||||
<text v-if="!showOrientation" style="color: #000;">{{ orientation.region }} {{orientation.district}}</text>
|
<text v-if="!showOrientation" style="color: #000;">{{ orientation.region }} {{orientation.district}}</text>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="currentAddress" v-if="showOrientation">
|
<view class="currentAddress" v-if="showOrientation">
|
||||||
<div class="currentAddress1">
|
<view class="currentAddress1">
|
||||||
<div class="currentAddress1_left">当前定位:{{orientation.district}}</div>
|
<view class="currentAddress1_left">当前定位:{{orientation.district}}</view>
|
||||||
<div class="currentAddress1_right" @click="headerConfirmClick">使用</div>
|
<view class="currentAddress1_right" @click="headerConfirmClick">使用</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="currentAddress2">{{orientation.region}}</div>
|
<view class="currentAddress2">{{orientation.region}}</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="row">
|
<view class="row">
|
||||||
<div class="row_label">门牌号</div>
|
<view class="row_label">门牌号</view>
|
||||||
<div class="row_con noneborder">
|
<view class="row_con noneborder">
|
||||||
<u--input placeholder="例:6栋201室" clearable border="none" v-model="houseNumber"></u--input>
|
<u--input placeholder="例:6栋201室" clearable border="none" v-model="houseNumber"></u--input>
|
||||||
<!-- <div class="tips">记得完善门牌号</div> -->
|
<!-- <view class="tips">记得完善门牌号</view> -->
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="tabItems" v-if="tab == 1">
|
<view class="tabItems" v-if="tab == 1">
|
||||||
<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="id"
|
||||||
@change="bindChange">
|
@change="bindChange">
|
||||||
@ -65,27 +65,27 @@
|
|||||||
</picker-view>
|
</picker-view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<div class="row">
|
<view class="row">
|
||||||
<div class="row_label"><span>*</span>详细地址</div>
|
<view class="row_label"><span>*</span>详细地址</view>
|
||||||
<div class="row_con">
|
<view class="row_con">
|
||||||
<u--input placeholder="小区、门牌号" clearable border="none" v-model="houseNumber"></u--input>
|
<u--input placeholder="小区、门牌号" clearable border="none" v-model="houseNumber"></u--input>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="line"></div>
|
<view class="line"></view>
|
||||||
<div class="isdef" @click="headerSettingDefaultAddressClick">
|
<view class="isdef" @click="headerSettingDefaultAddressClick">
|
||||||
<div class="isdef_left">
|
<view class="isdef_left">
|
||||||
<div class="isdef_left1">设置默认地址</div>
|
<view class="isdef_left1">设置默认地址</view>
|
||||||
<div class="isdef_left2">提醒:下单时会优先选择</div>
|
<view class="isdef_left2">提醒:下单时会优先选择</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="isdef_right">
|
<view 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 == 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="" />
|
<img v-if="isDefault == 1" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png" alt="" />
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="btn" @click="headerSubmitClick">确定</div>
|
<view class="btn" @click="headerSubmitClick">确定</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@ -222,9 +222,10 @@ export default {
|
|||||||
})
|
})
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
console.log("🚀 ~ headerSubmitClick ~ type:", this.type)
|
||||||
if(this.type === 'edit') {
|
if(this.type === 'edit') {
|
||||||
const res = await request(apiArr2.updateAddress, "POST", {
|
const res = await request(apiArr2.updateAddress, "POST", {
|
||||||
id: this.id,
|
user_id: this.id,
|
||||||
name: this.name,
|
name: this.name,
|
||||||
phone: this.phone,
|
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}`,
|
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}`,
|
||||||
|
|||||||
@ -1,44 +1,44 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
|
|
||||||
<div class="hasAddress">
|
<view class="hasAddress">
|
||||||
<div class="addressList">
|
<view class="addressList">
|
||||||
<div class="addressItem" v-for="item, index in list" :key="index" :class="{ 'addressItem_def': index == 0 }">
|
<view class="addressItem" v-for="item, index in list" :key="index" :class="{ 'addressItem_def': index == 0 }">
|
||||||
<div class="addressItem_top">
|
<view class="addressItem_top">
|
||||||
{{item.name}} {{item.phone}} <div v-if="item.is_default === 1" class="is_def">默认</div>
|
{{item.name}} {{item.phone}} <view v-if="item.is_default === 1" class="is_def">默认</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="addressItem_mid">{{item.address}}{{ item.house_number }}</div>
|
<view class="addressItem_mid">{{item.address}}{{ item.house_number }}</view>
|
||||||
<div class="addressItem_footer">
|
<view class="addressItem_footer">
|
||||||
<div class="addressItem_footer_left">
|
<view class="addressItem_footer_left">
|
||||||
<div v-if="item.is_default !== 1" @click="headerSettingDefault(item.id)">
|
<view v-if="item.is_default !== 1" @click="headerSettingDefault(item.id)">
|
||||||
<image src="http://192.168.0.172:5500/7.15/shop_checked1.png"></image>
|
<image src="http://192.168.0.172:5500/7.15/shop_checked1.png"></image>
|
||||||
设为默认
|
设为默认
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div v-if="item.is_default === 1">
|
<view v-if="item.is_default === 1">
|
||||||
<image src="http://192.168.0.172:5500/7.15/shop_checked2.png"></image>
|
<image src="http://192.168.0.172:5500/7.15/shop_checked2.png"></image>
|
||||||
已默认
|
已默认
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
</div>
|
</view>
|
||||||
<div class="addressItem_footer_right">
|
<view class="addressItem_footer_right">
|
||||||
<div class="btn1" @click="deleteItem(item.id )">删除</div>
|
<view class="btn1" @click="deleteItem(item.id )">删除</view>
|
||||||
<div class="btn2" @click="editItem(item)">修改</div>
|
<view class="btn2" @click="editItem(item)">修改</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="footer">
|
<view class="footer">
|
||||||
<div class="footerBtn" @click="addAddress">新增收货地址</div>
|
<view class="footerBtn" @click="addAddress">新增收货地址</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="empty" v-if="false">
|
<view class="empty" v-if="false">
|
||||||
<image src="http://192.168.0.172:5500/7.15/shop_noAdd.png"></image>
|
<image src="http://192.168.0.172:5500/7.15/shop_noAdd.png"></image>
|
||||||
<div class="empty_text">暂无收货地址</div>
|
<view class="empty_text">暂无收货地址</view>
|
||||||
|
|
||||||
<div class="addBtn" @click="addAddress">添加收货地址</div>
|
<view class="addBtn" @click="addAddress">添加收货地址</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@ -104,7 +104,7 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
async init() {
|
async init() {
|
||||||
const res = await request(apiArr.addressList, 'POST', {});
|
const res = await request(apiArr.addAddressList, 'POST', {});
|
||||||
this.list = res.address_list;
|
this.list = res.address_list;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@ -23,6 +23,34 @@ image {
|
|||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.isDay {
|
||||||
|
background-color: orangered;
|
||||||
|
height: 35rpx;
|
||||||
|
border-radius: 5rpx;
|
||||||
|
color: white;
|
||||||
|
font-size: 22rpx;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 5rpx 10rpx;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
background-color: orangered;
|
||||||
|
color: white;
|
||||||
|
font-size: 40rpx;
|
||||||
|
padding: 5rpx 10rpx;
|
||||||
|
border-radius: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-img {
|
||||||
|
position: absolute;
|
||||||
|
top: 20%;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.searchBox_left {
|
.searchBox_left {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding-left: 20rpx;
|
padding-left: 20rpx;
|
||||||
@ -80,6 +108,7 @@ image {
|
|||||||
color: #C7C7C7;
|
color: #C7C7C7;
|
||||||
margin-left: 30rpx;
|
margin-left: 30rpx;
|
||||||
padding-bottom: 4rpx;
|
padding-bottom: 4rpx;
|
||||||
|
text-decoration: line-through;
|
||||||
}
|
}
|
||||||
|
|
||||||
.GGBox {
|
.GGBox {
|
||||||
@ -159,6 +188,7 @@ image {
|
|||||||
margin: 0 20rpx;
|
margin: 0 20rpx;
|
||||||
margin-top: 20rpx;
|
margin-top: 20rpx;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Msg {
|
.Msg {
|
||||||
@ -303,6 +333,15 @@ image {
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.shadowBox1Item_btn{
|
||||||
|
width: 150rpx;
|
||||||
|
height: 170rpx;
|
||||||
|
opacity:0;
|
||||||
|
position: absolute;
|
||||||
|
left: 100rpx;
|
||||||
|
top: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.shadowBox1Item {
|
.shadowBox1Item {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -568,15 +607,17 @@ image {
|
|||||||
margin: 5rpx 5rpx 0 5rpx;
|
margin: 5rpx 5rpx 0 5rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.itemSizeBox {
|
||||||
|
margin: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.itemSize {
|
.itemSize {
|
||||||
width: 30%;
|
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
color: #333;
|
color: #333;
|
||||||
background: #F6F7FB;
|
background: #F6F7FB;
|
||||||
border-radius: 40rpx;
|
border-radius: 40rpx;
|
||||||
padding: 10rpx 15rpx;
|
padding: 10rpx 15rpx;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
margin:20rpx 30rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemSize_active {
|
.itemSize_active {
|
||||||
@ -584,15 +625,14 @@ image {
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemSize-img{
|
.itemSize-img {
|
||||||
width: 100rpx;
|
width: 100rpx;
|
||||||
height: 100rpx;
|
height: 100rpx;
|
||||||
margin-right: 30rpx;
|
margin-right: 30rpx;
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
border:1rpx solid red;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemSize_top{
|
.itemSize_top {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-left: 30rpx;
|
margin-left: 30rpx;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,33 +1,24 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<view class="header">
|
<view class="header">
|
||||||
<view
|
<view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||||||
class="searchBox"
|
|
||||||
:style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
|
|
||||||
>
|
|
||||||
<view class="searchBox_left" @click="back">
|
<view class="searchBox_left" @click="back">
|
||||||
<u-icon name="arrow-left" size="20px" color="#000"></u-icon>
|
<u-icon name="arrow-left" size="20px" color="#000"></u-icon>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="swiper">
|
<view class="swiper">
|
||||||
<swiper
|
<view v-if="currentGG.is_same_day" class="tag tag-img">
|
||||||
:indicator-dots="false"
|
当日达
|
||||||
:autoplay="true"
|
</view>
|
||||||
:interval="3000"
|
<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" @change="changeIndex">
|
||||||
:duration="1000"
|
<swiper-item v-for="(item, index) in currentGG.goods_carousel" :key="index">
|
||||||
@change="changeIndex"
|
|
||||||
>
|
|
||||||
<swiper-item
|
|
||||||
v-for="(item, index) in currentGG.goods_carousel"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<image :src="picUrl + item"></image>
|
<image :src="picUrl + item"></image>
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
</swiper>
|
</swiper>
|
||||||
|
|
||||||
<view class="NumDot">
|
<view class="NumDot">
|
||||||
{{ currentIndex }} /{{ currentGG.goods_carousel.length }}
|
{{ currentIndex }} / {{ currentGG.goods_carousel.length }}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@ -43,25 +34,20 @@
|
|||||||
<!-- @click="changeGG2(item, index)" :class="index == currentGGIndex ? 'active' : ''"> -->
|
<!-- @click="changeGG2(item, index)" :class="index == currentGGIndex ? 'active' : ''"> -->
|
||||||
<view class="GGBox">
|
<view class="GGBox">
|
||||||
<view class="GG_left">
|
<view class="GG_left">
|
||||||
<view
|
<view class="GG_Item" v-for="(item, index) in info.commodity_goods_info_list" :key="item.id"
|
||||||
class="GG_Item"
|
@click="changeGG(item, index)" :class="index == currentGGIndex ? 'active' : ''">
|
||||||
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 }}
|
{{ item.goods_spec }} / {{ item.goods_unit }}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="GG_rigth">
|
<view class="GG_rigth" @click="showSizePopup">
|
||||||
共{{ info.commodity_goods_info_list.length }}款<u-icon
|
共{{ info.commodity_goods_info_list.length }}款<u-icon size="26rpx" name="arrow-right"></u-icon>
|
||||||
size="26rpx"
|
|
||||||
name="arrow-right"
|
|
||||||
></u-icon>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="Tit">{{ currentGG.goods_name }}</view>
|
<view class="Tit">
|
||||||
|
<view class="isDay" v-if="currentGG.is_same_day">当日达</view>
|
||||||
|
<view>{{ currentGG.goods_name }}</view>
|
||||||
|
</view>
|
||||||
<view class="Msg">{{ currentGG.commodity_brief }}</view>
|
<view class="Msg">{{ currentGG.commodity_brief }}</view>
|
||||||
|
|
||||||
<view class="fenge"></view>
|
<view class="fenge"></view>
|
||||||
@ -109,31 +95,22 @@
|
|||||||
<!-- 评价部分 -->
|
<!-- 评价部分 -->
|
||||||
<view class="reviews-section">
|
<view class="reviews-section">
|
||||||
<view class="reviews-header">
|
<view class="reviews-header">
|
||||||
<h3>评价({{ comments.length }})</h3>
|
<h3>评价({{ comments.length ? comments.length : 0 }})</h3>
|
||||||
<view class="view-all" @click="showPopup">查看全部 ></view>
|
<view class="view-all" @click="showPopup">查看全部 ></view>
|
||||||
</view>
|
</view>
|
||||||
<view class="reviews-list" v-if="comments.length > 0">
|
<view class="reviews-list" v-if="comments.length > 0">
|
||||||
<view
|
<view class="review-item" v-for="(comment, index) in comments" :key="index">
|
||||||
class="review-item"
|
|
||||||
v-for="(comment, index) in comments"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<view class="review-user">
|
<view class="review-user">
|
||||||
<image :src="comment.avatar" class="user-avatar"></image>
|
<image :src="comment.mpuser.avatar" class="user-avatar"></image>
|
||||||
<view class="user-info">
|
<view class="user-info">
|
||||||
<view class="user-name">{{ comment.username }}</view>
|
<view class="user-name">{{ comment.mpuser.nick_name }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="review-time">{{ comment.time }}</view>
|
<view class="review-time">{{ comment.create_time }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="user-purchase">已购 {{ comment.product }}</view>
|
<view class="user-purchase">已购 {{ comment.goods_name.goods_name }}{{ comment.goods_name.goods_spec }}</view>
|
||||||
<view class="review-content">{{ comment.content }}</view>
|
<view class="review-content">{{ comment.user_review }}</view>
|
||||||
<view class="review-images" v-if="comment.images.length > 0">
|
<view class="review-images" v-if="comment.review_image.length > 0">
|
||||||
<image
|
<image :src="img" class="review-img" v-for="(img, idx) in comment.review_image" :key="idx"></image>
|
||||||
:src="img"
|
|
||||||
class="review-img"
|
|
||||||
v-for="(img, idx) in comment.images"
|
|
||||||
:key="idx"
|
|
||||||
></image>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -147,9 +124,8 @@
|
|||||||
<view class="Msg_ItemTit">商品编号</view>
|
<view class="Msg_ItemTit">商品编号</view>
|
||||||
<view class="Msg_ItemCon" @click="copys(currentGG.goods_no)">
|
<view class="Msg_ItemCon" @click="copys(currentGG.goods_no)">
|
||||||
{{ currentGG.goods_no }}
|
{{ currentGG.goods_no }}
|
||||||
<image
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_copy.png">
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_copy.png"
|
</image>
|
||||||
></image>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="Msg_Item">
|
<view class="Msg_Item">
|
||||||
@ -162,12 +138,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="GoosMsg">
|
<view class="GoosMsg">
|
||||||
<image
|
<image v-for="item in currentGG.goods_detail_pic" :src="picUrl + item" :key="item" mode="widthFix"></image>
|
||||||
v-for="item in currentGG.goods_detail_pic"
|
|
||||||
:src="picUrl + item"
|
|
||||||
:key="item"
|
|
||||||
mode="widthFix"
|
|
||||||
></image>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="priceInfo">
|
<view class="priceInfo">
|
||||||
@ -188,64 +159,40 @@
|
|||||||
<view class="Car">
|
<view class="Car">
|
||||||
<view class="car_left">
|
<view class="car_left">
|
||||||
<view class="share" @click="share">
|
<view class="share" @click="share">
|
||||||
<image
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share.png"
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share.png"
|
mode="widthFix"></image>
|
||||||
mode="widthFix"
|
|
||||||
></image>
|
|
||||||
分享
|
分享
|
||||||
</view>
|
</view>
|
||||||
<view class="cars" @click="car">
|
<view class="cars" @click="car">
|
||||||
<u-badge
|
<u-badge numberType="limit" :type="type" max="99" :value="carNum"></u-badge>
|
||||||
numberType="limit"
|
|
||||||
:type="type"
|
|
||||||
max="99"
|
|
||||||
:value="carNum"
|
|
||||||
></u-badge>
|
|
||||||
|
|
||||||
<image
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car.png"
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car.png"
|
mode="widthFix"></image>
|
||||||
mode="widthFix"
|
|
||||||
></image>
|
|
||||||
购物车
|
购物车
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view
|
<view class="car_right" v-if="
|
||||||
class="car_right"
|
|
||||||
v-if="
|
|
||||||
!info.commodity_goods_info_list[currentGGIndex].cart_count ||
|
!info.commodity_goods_info_list[currentGGIndex].cart_count ||
|
||||||
info.commodity_goods_info_list[currentGGIndex].cart_count.count == 0
|
info.commodity_goods_info_list[currentGGIndex].cart_count.count == 0
|
||||||
"
|
" @click="addCar">
|
||||||
@click="addCar"
|
|
||||||
>
|
|
||||||
加入购物车
|
加入购物车
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view
|
<view class="car_right" v-if="info.commodity_goods_info_list[currentGGIndex].cart_count.count > 0">
|
||||||
class="car_right"
|
<!-- <view class="car_right"> -->
|
||||||
v-if="
|
<u-number-box v-model="info.commodity_goods_info_list[currentGGIndex].cart_count.count"
|
||||||
info.commodity_goods_info_list[currentGGIndex].cart_count.count > 0
|
@change="changeCar" min="0">
|
||||||
"
|
<!-- <u-number-box > -->
|
||||||
>
|
|
||||||
<u-number-box
|
|
||||||
v-model="
|
|
||||||
info.commodity_goods_info_list[currentGGIndex].cart_count.count
|
|
||||||
"
|
|
||||||
@change="changeCar"
|
|
||||||
min="0"
|
|
||||||
>
|
|
||||||
<view slot="minus" class="minus">
|
<view slot="minus" class="minus">
|
||||||
<u-icon name="minus" size="36" bold></u-icon>
|
<u-icon name="minus" size="36" bold></u-icon>
|
||||||
</view>
|
</view>
|
||||||
<text
|
<text slot="input" style="width: 200rpx; text-align: center" class="input">
|
||||||
slot="input"
|
{{ info.commodity_goods_info_list[currentGGIndex].cart_count.count }}
|
||||||
style="width: 200rpx; text-align: center"
|
</text>
|
||||||
class="input"
|
<!-- text slot="input" style="width: 200rpx; text-align: center" class="input">
|
||||||
>
|
{{info.commodity_goods_info_list[currentGGIndex]}}
|
||||||
{{
|
</text> -->
|
||||||
info.commodity_goods_info_list[currentGGIndex].cart_count.count
|
|
||||||
}}</text
|
|
||||||
>
|
|
||||||
<view slot="plus" class="plus">
|
<view slot="plus" class="plus">
|
||||||
<u-icon name="plus" color="#FFFFFF" size="36" bold></u-icon>
|
<u-icon name="plus" color="#FFFFFF" size="36" bold></u-icon>
|
||||||
</view>
|
</view>
|
||||||
@ -256,18 +203,15 @@
|
|||||||
<!-- 分享 -->
|
<!-- 分享 -->
|
||||||
<view class="shadow" @click.stop="changeShadow" v-if="boxshadow1">
|
<view class="shadow" @click.stop="changeShadow" v-if="boxshadow1">
|
||||||
<view class="shadowBox1">
|
<view class="shadowBox1">
|
||||||
|
<button class="shadowBox1Item_btn" open-type="share" bindtap="onShareButtonClick"/>
|
||||||
<view class="shadowBox1Item" @click="shareFriend">
|
<view class="shadowBox1Item" @click="shareFriend">
|
||||||
<image
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_WX.png"
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_WX.png"
|
mode="aspectFill"></image>
|
||||||
mode="aspectFill"
|
|
||||||
></image>
|
|
||||||
微信好友
|
微信好友
|
||||||
</view>
|
</view>
|
||||||
<view class="shadowBox1Item" @click="openSave">
|
<view class="shadowBox1Item" @click="openSave">
|
||||||
<image
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_saveImg.png"
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_saveImg.png"
|
mode="aspectFill"></image>
|
||||||
mode="aspectFill"
|
|
||||||
></image>
|
|
||||||
生成海报
|
生成海报
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -278,16 +222,18 @@
|
|||||||
<view class="shadowBox_img">
|
<view class="shadowBox_img">
|
||||||
<view class="boxshadow_tit">今日商品推荐</view>
|
<view class="boxshadow_tit">今日商品推荐</view>
|
||||||
<view class="boxshadow_img">
|
<view class="boxshadow_img">
|
||||||
<image
|
<image v-if="currentGG && currentGG.commodity_pic && currentGG.commodity_pic.length > 0"
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_img.png"
|
:src="picUrl + currentGG.commodity_pic[0]">
|
||||||
>
|
</image>
|
||||||
|
<image v-else
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_img.png">
|
||||||
</image>
|
</image>
|
||||||
</view>
|
</view>
|
||||||
<view class="line"></view>
|
<view class="line"></view>
|
||||||
<view class="shadowBoxInfo">
|
<view class="shadowBoxInfo">
|
||||||
<view class="shadowboxInfo_left">二维码</view>
|
<image class="shadowboxInfo_left" :src="qrcodePath || 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/qrcode_placeholder.png'" mode="aspectFill"></image>
|
||||||
<view class="shadowboxInfo_right">
|
<view class="shadowboxInfo_right">
|
||||||
<view class="shadowboxInfo_right_1">正鲜生</view>
|
<view class="shadowboxInfo_right_1">{{ currentGG && currentGG.goods_name ? currentGG.goods_name : '' }}</view>
|
||||||
<view class="shadowboxInfo_right_2">
|
<view class="shadowboxInfo_right_2">
|
||||||
长按识别小程序 <br />
|
长按识别小程序 <br />
|
||||||
数量有限马上抢购
|
数量有限马上抢购
|
||||||
@ -295,19 +241,12 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="shadowBox_btn" @click.stop="saveImg">保存海报</view>
|
<view class="shadowBox_btn" @click.stop="saveImg(picUrl + currentGG.commodity_pic[0])">保存海报</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 评价 查看详情 -->
|
<!-- 评价 查看详情 -->
|
||||||
<u-popup
|
<u-popup :show="show" round="20rpx" mode="bottom" @close="close" @open="open" :z-index="10070">
|
||||||
:show="show"
|
|
||||||
round="20rpx"
|
|
||||||
mode="bottom"
|
|
||||||
@close="close"
|
|
||||||
@open="open"
|
|
||||||
:z-index="10070"
|
|
||||||
>
|
|
||||||
<view class="reviews-section">
|
<view class="reviews-section">
|
||||||
<view class="popup-header">
|
<view class="popup-header">
|
||||||
<h3 class="popup-header-h3">评价</h3>
|
<h3 class="popup-header-h3">评价</h3>
|
||||||
@ -324,27 +263,19 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="reviews-list" v-if="comments.length > 0">
|
<view class="reviews-list" v-if="comments.length > 0">
|
||||||
<view
|
<view class="review-item" v-for="(comment, index) in comments" :key="index">
|
||||||
class="review-item"
|
|
||||||
v-for="(comment, index) in comments"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<view class="review-user">
|
<view class="review-user">
|
||||||
<image :src="comment.avatar" class="user-avatar"></image>
|
<image :src="comment.mpuser.avatar" class="user-avatar"></image>
|
||||||
<view class="user-info">
|
<view class="user-info">
|
||||||
<view class="user-name">{{ comment.username }}</view>
|
<view class="user-name">{{ comment.mpuser.nick_name }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="review-time">{{ comment.time }}</view>
|
<view class="review-time">{{ comment.create_time }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="user-purchase">已购 {{ comment.product }}</view>
|
<view class="user-purchase">已购 {{ comment.goods_name.goods_name }}{{ comment.goods_name.goods_spec }}</view>
|
||||||
<view class="review-content">{{ comment.content }}</view>
|
<view class="review-content">{{ comment.user_review }}</view>
|
||||||
<view class="review-images" v-if="comment.images.length > 0">
|
<view class="review-images" v-if="comment.review_image.length > 0">
|
||||||
<image
|
<image :src="img" class="review-img" v-for="(img, idx) in comment.review_image" :key="idx">
|
||||||
:src="img"
|
</image>
|
||||||
class="review-img"
|
|
||||||
v-for="(img, idx) in comment.images"
|
|
||||||
:key="idx"
|
|
||||||
></image>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -352,40 +283,42 @@
|
|||||||
</u-popup>
|
</u-popup>
|
||||||
|
|
||||||
<!-- 选择款式 -->
|
<!-- 选择款式 -->
|
||||||
<u-popup
|
<u-popup :show="showSize" round="20rpx" mode="bottom" @close="closeSize" @open="open">
|
||||||
:show="showSize"
|
<!-- <view round="20rpx" mode="bottom"> -->
|
||||||
round="20rpx"
|
|
||||||
mode="bottom"
|
|
||||||
@close="closeSize"
|
|
||||||
@open="open"
|
|
||||||
>
|
|
||||||
<view class="popup-header">
|
<view class="popup-header">
|
||||||
<h3 class="popup-header-h3">选择款式</h3>
|
<h3 class="popup-header-h3">选择款式</h3>
|
||||||
<view class="popup-header-view" @click="closeSize">取消</view>
|
<view class="popup-header-view" @click="closeSize">取消</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="itemSize_top">
|
<view class="itemSize_top">
|
||||||
<image :src="changeImg" class="itemSize-img"></image>
|
<image :src="changeImg" class="itemSize-img">
|
||||||
|
<view v-if="currentGG.is_same_day" class="isDay"
|
||||||
|
style="position: absolute; font-size: 16rpx; height: 20rpx; z-index: 100;">当日达</view>
|
||||||
|
</image>
|
||||||
<view class="itemSize_info">
|
<view class="itemSize_info">
|
||||||
<view class="itemSize_name">{{ changeName }}</view>
|
<view class="itemSize_name" style="display: flex;">
|
||||||
|
<view v-if="currentGG.is_same_day" class="isDay">当日达</view>{{ changeName }}
|
||||||
|
</view>
|
||||||
<view class="itemSize_price">¥{{ changePrice }}/袋</view>
|
<view class="itemSize_price">¥{{ changePrice }}/袋</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view
|
<view class="itemSizeBox" v-for="(item, index) in info.commodity_goods_info_list" :key="item.id"
|
||||||
class="itemSize"
|
@click="changeGG(item, index)">
|
||||||
v-for="(item, index) in info.commodity_goods_info_list"
|
<text class="itemSize" :class="index == currentGGIndex ? 'itemSize_active' : ''">{{ item.goods_name }} {{ item.goods_spec }} / {{ item.goods_unit }}</text>
|
||||||
:key="item.id"
|
|
||||||
@click="changeGG(item, index)"
|
|
||||||
:class="index == currentGGIndex ? 'itemSize_active' : ''"
|
|
||||||
>
|
|
||||||
{{ item.goods_name }} {{ item.goods_spec }} / {{ item.goods_unit }}
|
|
||||||
</view>
|
</view>
|
||||||
</u-popup>
|
</u-popup>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { apiArr } from "../../../api/shop";
|
import {
|
||||||
import { picUrl, menuButtonInfo, request, NavgateTo } from "../../../utils";
|
apiArr
|
||||||
|
} from "../../../api/shop";
|
||||||
|
import {
|
||||||
|
picUrl,
|
||||||
|
menuButtonInfo,
|
||||||
|
request,
|
||||||
|
NavgateTo
|
||||||
|
} from "../../../utils";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -398,7 +331,7 @@ export default {
|
|||||||
type: "error",
|
type: "error",
|
||||||
boxshadow1: false,
|
boxshadow1: false,
|
||||||
boxshadow2: false,
|
boxshadow2: false,
|
||||||
id: "",
|
id: "184",
|
||||||
info: "",
|
info: "",
|
||||||
currentIndex: "1", //当前轮播图
|
currentIndex: "1", //当前轮播图
|
||||||
|
|
||||||
@ -408,36 +341,15 @@ export default {
|
|||||||
carOrderList: [],
|
carOrderList: [],
|
||||||
// 新增评论数据
|
// 新增评论数据
|
||||||
showReviewPopup: false,
|
showReviewPopup: false,
|
||||||
comments: [
|
comments: [],
|
||||||
{
|
|
||||||
avatar: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
|
|
||||||
username: "TP",
|
|
||||||
product: "库尔勒香梨 10kg/箱",
|
|
||||||
content:
|
|
||||||
"踏入这家位于街角的餐厅,木质门框与暖黄灯光交织出温馨氛围,墙面上手绘的食材插画画透着文艺气息,开放式厨房的设计让食客能看见厨师处理食材的全过程,第一印象便给人以干净与安心。",
|
|
||||||
images: ["https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png"],
|
|
||||||
time: "2025-03-01 11:24:20",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
avatar: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
|
|
||||||
username: "TP",
|
|
||||||
product: "库尔勒香梨 10kg/箱",
|
|
||||||
content:
|
|
||||||
"踏入这家位于街角的餐厅,木质门框与暖黄灯光交织出温馨氛围,墙面上手绘的食材插_draw着文艺气息,开放式厨房的设计让食客能看见厨师处理食材的全过程,第一印象便给人以干净与安心。",
|
|
||||||
images: [
|
|
||||||
"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
|
|
||||||
"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
|
|
||||||
"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
|
|
||||||
],
|
|
||||||
time: "2025-03-01 11:24:20",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
show: false,
|
show: false,
|
||||||
showSize: false,
|
showSize: false,
|
||||||
|
|
||||||
changeImg: "",
|
changeImg: "",
|
||||||
changeName: "",
|
changeName: "",
|
||||||
changePrice: "",
|
changePrice: "",
|
||||||
|
selectedGoods: null, // 保存传入的商品规格信息
|
||||||
|
qrcodePath: null, // 存储当前页面的二维码路径
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@ -484,11 +396,11 @@ export default {
|
|||||||
this.boxshadow2 = true;
|
this.boxshadow2 = true;
|
||||||
},
|
},
|
||||||
// 保存海报
|
// 保存海报
|
||||||
saveImg() {
|
saveImg(picUrl) {
|
||||||
this.boxshadow2 = false;
|
this.boxshadow2 = false;
|
||||||
// 微信小程序保存图片
|
// 微信小程序保存图片
|
||||||
uni.downloadFile({
|
uni.downloadFile({
|
||||||
url: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_img.png",
|
url: picUrl,
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
if (res.statusCode === 200) {
|
if (res.statusCode === 200) {
|
||||||
uni.saveImageToPhotosAlbum({
|
uni.saveImageToPhotosAlbum({
|
||||||
@ -538,17 +450,33 @@ export default {
|
|||||||
this.carOrderList.forEach((items) => {
|
this.carOrderList.forEach((items) => {
|
||||||
res.commodity_goods_info_list.forEach((item) => {
|
res.commodity_goods_info_list.forEach((item) => {
|
||||||
if (items.goods_id == item.id) {
|
if (items.goods_id == item.id) {
|
||||||
item.cart_count = { count: 0 };
|
item.cart_count = {
|
||||||
|
count: 0
|
||||||
|
};
|
||||||
item.cart_count.count = items.count;
|
item.cart_count.count = items.count;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
this.info = res;
|
this.info = res;
|
||||||
this.currentGG = res.commodity_goods_info_list[0];
|
console.log("this.info", this.info.commodity_goods_info_list);
|
||||||
this.currentGGIndex = 0;
|
|
||||||
|
|
||||||
this.changeImg = this.currentGG.commodity_pic[0]
|
// 检查是否有传入的选中商品信息,如果有则设置为默认选中
|
||||||
|
let selectedIndex = 0;
|
||||||
|
if (this.selectedGoods) {
|
||||||
|
for (let i = 0; i < res.commodity_goods_info_list.length; i++) {
|
||||||
|
if (res.commodity_goods_info_list[i].id === this.selectedGoods.id) {
|
||||||
|
selectedIndex = i;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.currentGG = res.commodity_goods_info_list[selectedIndex];
|
||||||
|
console.log("this.currentGG", this.currentGG);
|
||||||
|
this.currentGGIndex = selectedIndex;
|
||||||
|
|
||||||
|
this.changeImg = picUrl + this.currentGG.commodity_pic[0]
|
||||||
this.changeName = this.currentGG.goods_alias
|
this.changeName = this.currentGG.goods_alias
|
||||||
this.changePrice = this.currentGG.sales_price
|
this.changePrice = this.currentGG.sales_price
|
||||||
});
|
});
|
||||||
@ -569,17 +497,19 @@ export default {
|
|||||||
|
|
||||||
// 切换规格
|
// 切换规格
|
||||||
changeGG(item, index) {
|
changeGG(item, index) {
|
||||||
console.log("🚀 ~ changeGG ~ item:", item);
|
|
||||||
this.currentGG = item;
|
this.currentGG = item;
|
||||||
this.currentGGIndex = index;
|
this.currentGGIndex = index;
|
||||||
if (this.currentGG.cart_count) {
|
if (this.currentGG.cart_count) {
|
||||||
this.currentNum = this.currentGG.cart_count.count;
|
this.currentNum = this.currentGG.cart_count.count;
|
||||||
} else {
|
} else {
|
||||||
this.currentGG.cart_count = { count: 0 };
|
this.currentGG.cart_count = {
|
||||||
|
count: 0
|
||||||
|
};
|
||||||
}
|
}
|
||||||
this.changeImg = item.commodity_pic[0]
|
this.changeImg = picUrl + item.commodity_pic[0]
|
||||||
this.changeName = item.goods_alias
|
this.changeName = item.goods_alias
|
||||||
this.changePrice = item.sales_price
|
this.changePrice = item.sales_price
|
||||||
|
this.getComment(item.goods_id)
|
||||||
},
|
},
|
||||||
car() {
|
car() {
|
||||||
NavgateTo("../shopCar/index");
|
NavgateTo("../shopCar/index");
|
||||||
@ -601,20 +531,35 @@ export default {
|
|||||||
|
|
||||||
addCar() {
|
addCar() {
|
||||||
let that = this;
|
let that = this;
|
||||||
|
// 获取当前商品
|
||||||
|
const currentGoods = this.info.commodity_goods_info_list[this.currentGGIndex];
|
||||||
|
|
||||||
|
// 获取当前购物车数量和库存数量
|
||||||
|
const currentQuantity = currentGoods.cart_count ? currentGoods.cart_count.count : 0;
|
||||||
|
const stockQuantity = currentGoods.stock_quantity || 0;
|
||||||
|
|
||||||
|
// 检查库存是否充足
|
||||||
|
if (currentQuantity >= stockQuantity) {
|
||||||
|
uni.showToast({
|
||||||
|
title: "库存不足",
|
||||||
|
icon: "none",
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
//如果没有当前商品 直接添加一个
|
//如果没有当前商品 直接添加一个
|
||||||
let goods_id_and_count = [];
|
let goods_id_and_count = [];
|
||||||
this.info.commodity_goods_info_list[this.currentGGIndex].cart_count = {
|
this.info.commodity_goods_info_list[this.currentGGIndex].cart_count = {
|
||||||
count: 1,
|
count: currentQuantity + 1,
|
||||||
};
|
};
|
||||||
this.info.commodity_goods_info_list.forEach((item) => {
|
this.info.commodity_goods_info_list.forEach((item) => {
|
||||||
console.log(item.cart_count);
|
|
||||||
goods_id_and_count.push({
|
goods_id_and_count.push({
|
||||||
goods_id: item.id,
|
goods_id: item.id,
|
||||||
count: item.cart_count ? item.cart_count.count : 0,
|
count: item.cart_count ? item.cart_count.count : 0,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
console.log(goods_id_and_count);
|
|
||||||
//因为是当前商品没有 调用update就是增加商品。增加商品之后再获取购物车数量
|
//因为是当前商品没有 调用update就是增加商品。增加商品之后再获取购物车数量
|
||||||
request(apiArr.updateCar, "POST", {
|
request(apiArr.updateCar, "POST", {
|
||||||
goods_id_and_count,
|
goods_id_and_count,
|
||||||
@ -643,20 +588,17 @@ export default {
|
|||||||
//商品数量变化
|
//商品数量变化
|
||||||
const params = {
|
const params = {
|
||||||
user_id: uni.getStorageSync("userId"),
|
user_id: uni.getStorageSync("userId"),
|
||||||
goods_id_and_count: [
|
goods_id_and_count: [{
|
||||||
{
|
goods_id: this.info.commodity_goods_info_list[this.currentGGIndex].id,
|
||||||
goods_id:
|
|
||||||
this.info.commodity_goods_info_list[this.currentGGIndex].id,
|
|
||||||
count: newValue.value,
|
count: newValue.value,
|
||||||
},
|
},],
|
||||||
],
|
|
||||||
};
|
};
|
||||||
request(apiArr.updateCar, "POST", params).then((res) => {
|
request(apiArr.updateCar, "POST", params).then((res) => {
|
||||||
console.log(res);
|
console.log(res);
|
||||||
this.getShopCarList();
|
this.getShopCarList();
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: "操作成功!",
|
title: "操作成功!",
|
||||||
success() {},
|
success() { },
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
@ -676,20 +618,42 @@ export default {
|
|||||||
closeSize() {
|
closeSize() {
|
||||||
this.showSize = false;
|
this.showSize = false;
|
||||||
},
|
},
|
||||||
},
|
// 获取评论
|
||||||
onLoad(options) {
|
getComment(id) {
|
||||||
|
let params = {}
|
||||||
|
if (id) {
|
||||||
|
params = {
|
||||||
|
commodity_id: this.id,
|
||||||
|
goods_id: id
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
params = {
|
||||||
|
commodity_id: this.id,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
request(apiArr.getComment, "POST", params).then((res) => {
|
||||||
|
this.comments = res.commodity_evaluate_list.map(item => ({
|
||||||
|
...item,
|
||||||
|
review_image: item.review_image ? item.review_image.split(',') : []
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},onLoad(options) {
|
||||||
const itemObj = JSON.parse(decodeURIComponent(options.item));
|
const itemObj = JSON.parse(decodeURIComponent(options.item));
|
||||||
const meun = menuButtonInfo();
|
const meun = menuButtonInfo();
|
||||||
this.top = meun.top;
|
this.top = meun.top;
|
||||||
this.localHeight = meun.height;
|
this.localHeight = meun.height;
|
||||||
|
|
||||||
this.id = itemObj.id;
|
|
||||||
|
this.id = itemObj.commodity_id ? itemObj.commodity_id : itemObj.id;
|
||||||
|
this.selectedGoods = itemObj; // 保存传入的完整商品信息
|
||||||
},
|
},
|
||||||
onReachBottom() {},
|
onReachBottom() { },
|
||||||
onShow() {
|
onShow() {
|
||||||
this.getShopCarList();
|
this.getShopCarList();
|
||||||
this.getGoodsInfo();
|
this.getGoodsInfo();
|
||||||
this.getShopCar();
|
this.getShopCar();
|
||||||
|
this.getComment();
|
||||||
},
|
},
|
||||||
|
|
||||||
//离开页面的时候直接更新购物车数量(目前接口是 传入商品id 数量。如果有当前商品就更新数量。如果没有就增加商品。如果删除某个商品 count 为0 就删除)
|
//离开页面的时候直接更新购物车数量(目前接口是 传入商品id 数量。如果有当前商品就更新数量。如果没有就增加商品。如果删除某个商品 count 为0 就删除)
|
||||||
|
|||||||
315
packages/shop/groupPurchase/index.css
Normal file
315
packages/shop/groupPurchase/index.css
Normal file
@ -0,0 +1,315 @@
|
|||||||
|
.group-purchase-container {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
max-width: 750rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 顶部横幅 */
|
||||||
|
.banner {
|
||||||
|
background: linear-gradient(to right, #fd8d3c, #fe4909);
|
||||||
|
color: white;
|
||||||
|
/* position: relative; */
|
||||||
|
overflow: hidden;
|
||||||
|
height: 350rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner image {
|
||||||
|
width: 100%;
|
||||||
|
height: 300rpx;
|
||||||
|
/* object-fit: cover; */
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.banner-content {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-subtitle {
|
||||||
|
font-size: 18rpx;
|
||||||
|
background-color: rgba(255, 255, 255, 0.2);
|
||||||
|
padding: 5rpx 10rpx;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 商品列表 */
|
||||||
|
.goods-list {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 30rpx 20rpx;
|
||||||
|
margin-top: -50rpx;
|
||||||
|
border-radius: 50rpx 50rpx 0 0;
|
||||||
|
height: 60vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-item {
|
||||||
|
border-radius: 10rpx;
|
||||||
|
padding: 15rpx;
|
||||||
|
margin-bottom: 25rpx;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-item2 {
|
||||||
|
border-radius: 10rpx;
|
||||||
|
padding: 15rpx;
|
||||||
|
margin-bottom: 25rpx;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-image {
|
||||||
|
width: 140rpx;
|
||||||
|
height: 140rpx;
|
||||||
|
border-radius: 15rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-image image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-info {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-desc {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-price {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #e63946;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-price {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #e63946;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-price1{
|
||||||
|
width: 100rpx;
|
||||||
|
padding: 10rpx 15rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #fc5d15;
|
||||||
|
border-radius: 15rpx 0 0 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-price2{
|
||||||
|
width: auto;
|
||||||
|
padding: 10rpx 15rpx;
|
||||||
|
background: linear-gradient(to bottom, #fef6d6, #fee8a9);
|
||||||
|
border-radius: 0 15rpx 15rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.original-price {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown {
|
||||||
|
width: auto;
|
||||||
|
font-size: 22rpx;
|
||||||
|
padding: 10rpx 20rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
background-color: #fe2f01;
|
||||||
|
position: absolute;
|
||||||
|
/* top: 120rpx; */
|
||||||
|
bottom: -30rpx;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quantity-control {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decrease-btn {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border: 1rpx solid #ccc;
|
||||||
|
border-radius: 50%;
|
||||||
|
line-height: 33rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.increase-btn {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
background-color: #ff502a;
|
||||||
|
border-radius: 50%;
|
||||||
|
line-height: 33rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quantity {
|
||||||
|
margin: 0 15rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
width: 40rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 购物车按钮 */
|
||||||
|
.shop_car {
|
||||||
|
width: 140rpx;
|
||||||
|
height: 140rpx;
|
||||||
|
position: fixed;
|
||||||
|
right: 33rpx;
|
||||||
|
bottom: 80rpx;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop_car image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-badge {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: -10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 规格标签样式 */
|
||||||
|
.specification-tag {
|
||||||
|
width: 130rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #feeceb;
|
||||||
|
padding: 10rpx 20rpx;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
margin: 15rpx 0;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #dd4020;
|
||||||
|
}
|
||||||
|
|
||||||
|
.specification-tag text {
|
||||||
|
margin-right: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 货品列表样式 */
|
||||||
|
.sku-list {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
padding: 15rpx;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sku-item{
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sku-info{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sku-image{
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
border-radius: 15rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sku-price {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #e63946;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sku-price1{
|
||||||
|
width: auto;
|
||||||
|
padding: 10rpx 15rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #fc5d15;
|
||||||
|
border-radius: 15rpx 0 0 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sku-price2{
|
||||||
|
width: auto;
|
||||||
|
padding: 10rpx 15rpx;
|
||||||
|
background: linear-gradient(to bottom, #fef6d6, #fee8a9);
|
||||||
|
border-radius: 0 15rpx 15rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sku-control {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sku-countdown {
|
||||||
|
width: auto;
|
||||||
|
font-size: 22rpx;
|
||||||
|
padding: 5rpx 20rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
background-color: #fe2f01;
|
||||||
|
position: absolute;
|
||||||
|
top: 170rpx;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
350
packages/shop/groupPurchase/index.vue
Normal file
350
packages/shop/groupPurchase/index.vue
Normal file
@ -0,0 +1,350 @@
|
|||||||
|
<template>
|
||||||
|
<view class="group-purchase-container">
|
||||||
|
<!-- 顶部横幅 -->
|
||||||
|
<view class="banner">
|
||||||
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/gp_index_top.png"></image>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 商品列表 -->
|
||||||
|
<view class="goods-list">
|
||||||
|
<!-- 商品项 -->
|
||||||
|
<view v-for="(item, index) in goodsList" :key="index">
|
||||||
|
<!-- 有多个货品 -->
|
||||||
|
<view class="goods-item" v-if="item.group_buy_goods_list.length > 1">
|
||||||
|
<view class="goods-image">
|
||||||
|
<image :src="item.commodity_pic" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="goods-info">
|
||||||
|
<view class="goods-name">{{ item.commodity_name }}</view>
|
||||||
|
<view class="goods-desc">{{ item.commodity_intro }}</view>
|
||||||
|
<view class="goods-price"> {{ getPriceRange(item.group_buy_goods_list) }} </view>
|
||||||
|
|
||||||
|
<!-- 选择规格标签 -->
|
||||||
|
<view class="specification-tag" @click.stop="toggleSkuList(index)">
|
||||||
|
<text>{{ item.showSkuList ? '收起' : '选择规格' }}</text>
|
||||||
|
<u-icon name="arrow-down" size="26rpx" color="#FF370B" v-if="!item.showSkuList"></u-icon>
|
||||||
|
<u-icon name="arrow-up" size="26rpx" color="#FF370B" v-else></u-icon>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 货品列表 -->
|
||||||
|
<view class="sku-list" v-if="item.showSkuList">
|
||||||
|
<view v-for="(sku, skuIndex) in item.group_buy_goods_list" :key="skuIndex">
|
||||||
|
<view class="sku-item" @click="toDetail(sku)">
|
||||||
|
<view class="sku-info">
|
||||||
|
<view class="sku-image">
|
||||||
|
<image :src="sku.commodity_pic" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="goods-info">
|
||||||
|
<view class="goods-name">{{ sku.goods_name }}</view>
|
||||||
|
<view class="goods-desc">{{ sku.goods_spec }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="price-container">
|
||||||
|
<view class="sku-price">
|
||||||
|
<view class="sku-price1">团购价</view>
|
||||||
|
<view class="sku-price2">¥{{ sku.group_buy_price }}/{{ sku.goods_unit }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="sku-control">
|
||||||
|
<view class="decrease-btn" @tap.stop="decreaseQuantity(index, skuIndex)">-
|
||||||
|
</view>
|
||||||
|
<view class="quantity">{{ sku.quantity }}</view>
|
||||||
|
<view class="increase-btn" @tap.stop="increaseQuantity(index, skuIndex)">+
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="original-price">单买价 ¥{{ sku.sales_price }}/{{ sku.goods_unit }}</view>
|
||||||
|
<view class="sku-countdown">
|
||||||
|
{{
|
||||||
|
getEndTheCountdown(sku.group_buy_activity_info.end_time)
|
||||||
|
}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 只有一个货品 -->
|
||||||
|
<view v-else>
|
||||||
|
<view class="goods-item2" @click="toDetail(item)">
|
||||||
|
<view class="goods-image">
|
||||||
|
<image :src="item.commodity_pic" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="goods-info">
|
||||||
|
<view class="goods-name">{{ item.commodity_name }}</view>
|
||||||
|
<view class="goods-desc">{{ item.commodity_intro }}</view>
|
||||||
|
<view class="price-container">
|
||||||
|
<view class="group-price">
|
||||||
|
<view class="group-price1">团购价</view>
|
||||||
|
<view class="group-price2">¥{{ item.group_buy_goods_list[0].group_buy_price }}/{{
|
||||||
|
item.group_buy_goods_list[0].goods_unit }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="quantity-control">
|
||||||
|
<view class="decrease-btn" @tap.stop="decreaseQuantity(index, 0)">-</view>
|
||||||
|
<view class="quantity">{{ item.group_buy_goods_list[0].quantity }}</view>
|
||||||
|
<view class="increase-btn" @tap.stop="increaseQuantity(index, 0)">+</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="original-price">单买价 ¥{{ item.group_buy_goods_list[0].sales_price }}/{{
|
||||||
|
item.group_buy_goods_list[0].goods_unit }}</view>
|
||||||
|
<view class="countdown">
|
||||||
|
{{ getEndTheCountdown(item.group_buy_goods_list[0].group_buy_activity_info.end_time) }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 购物车按钮 -->
|
||||||
|
<view 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>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { picUrl, menuButtonInfo, request, NavgateTo } from "../../../utils";
|
||||||
|
import { apiArr } from '@/api/groupPurchase.js'
|
||||||
|
import { apiArr as shopApi } from "../../../api/shop.js";
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
goodsList: [],
|
||||||
|
carNum: 0,
|
||||||
|
quantity: 0,
|
||||||
|
timer: null, // 定时器ID
|
||||||
|
endTime: '', // 初始化结束时间
|
||||||
|
updateTime: Date.now(), // 用于触发倒计时更新的时间戳
|
||||||
|
goodsDetail: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
// this.getGoodsList()
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
// 在页面显示时启动定时器
|
||||||
|
if (!this.timer) {
|
||||||
|
this.timer = setInterval(() => {
|
||||||
|
// 更新时间戳,触发页面重新渲染
|
||||||
|
this.updateTime = Date.now();
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确保getGoodsList和getShopdetail都执行完毕后再执行getGoodsNum
|
||||||
|
Promise.all([
|
||||||
|
// 确保getGoodsList已完成
|
||||||
|
this.goodsList.length > 0 ? Promise.resolve() : this.getGoodsList(),
|
||||||
|
// 调用getShopdetail并等待其完成
|
||||||
|
this.getShopdetail()
|
||||||
|
]).then(() => {
|
||||||
|
this.getGoodsNum();//获取货品在购物车中的数量
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getGoodsList() {
|
||||||
|
if(!uni.getStorageSync('userId')){
|
||||||
|
uni.showToast({
|
||||||
|
title: '请先登录',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const params = {
|
||||||
|
user_id: uni.getStorageSync('userId')
|
||||||
|
}
|
||||||
|
return request(apiArr.groupBuyList, 'POST', params).then(res => {
|
||||||
|
const list = res.group_buy_list.map(item => {
|
||||||
|
// 为每个货品初始化quantity
|
||||||
|
const group_buy_goods_list = item.group_buy_goods_list.map(sku => ({
|
||||||
|
...sku,
|
||||||
|
commodity_pic: picUrl + sku.commodity_pic,
|
||||||
|
quantity: 0
|
||||||
|
}));
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
commodity_pic: picUrl + item.commodity_pic,
|
||||||
|
showSkuList: false,
|
||||||
|
group_buy_goods_list
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.goodsList = list
|
||||||
|
return res;
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getShopdetail() {
|
||||||
|
const params = {
|
||||||
|
is_group_buy: 1,
|
||||||
|
}
|
||||||
|
return request(shopApi.getCar, "POST", params).then((res) => {
|
||||||
|
this.carNum = res.total;
|
||||||
|
// 合并当日达和普通商品数据
|
||||||
|
this.goodsDetail = [].concat(res.same_day_cart_list, res.normal_cart_list)
|
||||||
|
.flatMap(supplier => supplier.commodity_cart_and_goods_model);
|
||||||
|
return res;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getGoodsNum() {
|
||||||
|
if (!this.goodsDetail || !this.goodsList || this.goodsList.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 遍历所有商品
|
||||||
|
this.goodsList.forEach(goods => {
|
||||||
|
// 遍历商品的所有货品
|
||||||
|
goods.group_buy_goods_list.forEach(sku => {
|
||||||
|
// 在购物车数据中查找对应的货品
|
||||||
|
const matchedItem = this.goodsDetail.find(item => item.goods_id === sku.goods_id);
|
||||||
|
|
||||||
|
// 如果找到匹配项,更新quantity
|
||||||
|
if (matchedItem) {
|
||||||
|
sku.quantity = matchedItem.count;
|
||||||
|
} else {
|
||||||
|
// 如果没有找到,设置为0
|
||||||
|
sku.quantity = 0;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
toDetail(itemObj) {
|
||||||
|
const item = {
|
||||||
|
...itemObj,
|
||||||
|
groupById: itemObj.group_buy_activity_info.id
|
||||||
|
};
|
||||||
|
NavgateTo(`/packages/shop/groupPurchaseDetail/index?item=${JSON.stringify(item)}`)
|
||||||
|
},
|
||||||
|
// 获取商品价格范围
|
||||||
|
getPriceRange(goodsList) {
|
||||||
|
if (!goodsList || goodsList.length === 0) return '¥0';
|
||||||
|
const prices = goodsList.map(item => Number(item.sales_price));
|
||||||
|
const minPrice = Math.min(...prices);
|
||||||
|
const maxPrice = Math.max(...prices);
|
||||||
|
return minPrice === maxPrice ? `¥${minPrice}` : `¥${minPrice} ~ ¥${maxPrice}`;
|
||||||
|
},
|
||||||
|
// 展开/收起货品列表
|
||||||
|
toggleSkuList(index) {
|
||||||
|
this.goodsList[index].showSkuList = !this.goodsList[index].showSkuList;
|
||||||
|
},
|
||||||
|
// 增加货品数量
|
||||||
|
increaseQuantity(goodsIndex, skuIndex) {
|
||||||
|
if (this.goodsList[goodsIndex].group_buy_goods_list[skuIndex].quantity == 0) {
|
||||||
|
this.goodsList[goodsIndex].group_buy_goods_list[skuIndex].quantity += this.goodsList[goodsIndex].group_buy_goods_list[skuIndex].min_order_quantity
|
||||||
|
this.carNum += this.goodsList[goodsIndex].group_buy_goods_list[skuIndex].min_order_quantity
|
||||||
|
} else {
|
||||||
|
if (this.goodsList[goodsIndex].group_buy_goods_list[skuIndex].quantity == this.goodsList[goodsIndex].group_buy_goods_list[skuIndex].total_stock) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '库存不足',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (this.goodsList[goodsIndex].group_buy_goods_list[skuIndex].quantity == this.goodsList[goodsIndex].group_buy_goods_list[skuIndex].max_limit_quantity) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '一次最多购买' + this.goodsList[goodsIndex].group_buy_goods_list[skuIndex].max_limit_quantity + '件',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.goodsList[goodsIndex].group_buy_goods_list[skuIndex].quantity++;
|
||||||
|
this.carNum++;
|
||||||
|
}
|
||||||
|
const params = {
|
||||||
|
goods_id_and_count: [
|
||||||
|
{
|
||||||
|
goods_id: this.goodsList[goodsIndex].group_buy_goods_list[skuIndex].id,
|
||||||
|
count: this.goodsList[goodsIndex].group_buy_goods_list[skuIndex].quantity,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
group_buy_id: this.goodsList[goodsIndex].group_buy_goods_list[skuIndex].group_buy_activity_info.id
|
||||||
|
}
|
||||||
|
this.updateCar(params);
|
||||||
|
},
|
||||||
|
// 减少货品数量
|
||||||
|
decreaseQuantity(goodsIndex, skuIndex) {
|
||||||
|
if (this.goodsList[goodsIndex].group_buy_goods_list[skuIndex].quantity > 0) {
|
||||||
|
if (this.goodsList[goodsIndex].group_buy_goods_list[skuIndex].quantity == this.goodsList[goodsIndex].group_buy_goods_list[skuIndex].min_order_quantity) {
|
||||||
|
this.goodsList[goodsIndex].group_buy_goods_list[skuIndex].quantity = 0
|
||||||
|
this.carNum = 0
|
||||||
|
} else {
|
||||||
|
this.goodsList[goodsIndex].group_buy_goods_list[skuIndex].quantity--;
|
||||||
|
this.carNum--;
|
||||||
|
}
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
goods_id_and_count: [
|
||||||
|
{
|
||||||
|
goods_id: this.goodsList[goodsIndex].group_buy_goods_list[skuIndex].id,
|
||||||
|
count: this.goodsList[goodsIndex].group_buy_goods_list[skuIndex].quantity,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
group_buy_id: this.goodsList[goodsIndex].group_buy_goods_list[skuIndex].group_buy_activity_info.id
|
||||||
|
}
|
||||||
|
this.updateCar(params);
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: '已经没有了...',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 请求更改购物车接口
|
||||||
|
async updateCar(params) {
|
||||||
|
return request(shopApi.updateCar, "POST", params).then((res) => {
|
||||||
|
this.getShopdetail();
|
||||||
|
uni.showToast({
|
||||||
|
title: "操作成功!",
|
||||||
|
success() { },
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 跳转到购物车
|
||||||
|
shopCar() {
|
||||||
|
const item = {
|
||||||
|
is_group_buy: 1,
|
||||||
|
}
|
||||||
|
NavgateTo("../shopCar/index?item=" + JSON.stringify(item));
|
||||||
|
},
|
||||||
|
// 计算距离结束日期的剩余时间
|
||||||
|
getEndTheCountdown(endTime) {
|
||||||
|
// 获取当前时间和结束时间的时间戳
|
||||||
|
const now = new Date().getTime();
|
||||||
|
const end = new Date(endTime).getTime();
|
||||||
|
|
||||||
|
// 计算时间差(毫秒)
|
||||||
|
let diff = end - now;
|
||||||
|
|
||||||
|
// 如果已经结束,返回提示
|
||||||
|
if (diff <= 0) {
|
||||||
|
return '团购已结束';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算天、小时、分钟
|
||||||
|
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||||
|
diff -= days * (1000 * 60 * 60 * 24);
|
||||||
|
|
||||||
|
const hours = Math.floor(diff / (1000 * 60 * 60));
|
||||||
|
diff -= hours * (1000 * 60 * 60);
|
||||||
|
|
||||||
|
const minutes = Math.floor(diff / (1000 * 60));
|
||||||
|
diff -= minutes * (1000 * 60);
|
||||||
|
|
||||||
|
// 返回格式化的字符串
|
||||||
|
return `${days}天${hours}小时${minutes}分钟后结束`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onHide() {
|
||||||
|
// 清除定时器
|
||||||
|
if (this.timer) {
|
||||||
|
clearInterval(this.timer)
|
||||||
|
this.timer = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url("./index.css");
|
||||||
|
</style>
|
||||||
1056
packages/shop/groupPurchaseDetail/index.css
Normal file
1056
packages/shop/groupPurchaseDetail/index.css
Normal file
File diff suppressed because it is too large
Load Diff
878
packages/shop/groupPurchaseDetail/index.vue
Normal file
878
packages/shop/groupPurchaseDetail/index.vue
Normal file
@ -0,0 +1,878 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="header">
|
||||||
|
<view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||||||
|
<view class="searchBox_left" @click="back">
|
||||||
|
<u-icon name="arrow-left" size="20px" color="#000"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="swiper">
|
||||||
|
<view class="tag2 tag-img" v-if="
|
||||||
|
currentGG.is_same_day
|
||||||
|
">当日达</view>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<view class="NumDot" v-if="currentGG.goods_carousel && currentGG.goods_carousel.length > 0">
|
||||||
|
{{ currentIndex }} /{{ currentGG.goods_carousel.length }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="box_15">
|
||||||
|
<view class="section_2">
|
||||||
|
<view class="text-wrapper_4">
|
||||||
|
<text lines="1" class="text_31">¥</text>
|
||||||
|
<text lines="1" class="text_30">{{ currentGG.group_buy_price }}</text>
|
||||||
|
<text lines="1" class="text_33">/{{ currentGG.goods_unit }}</text>
|
||||||
|
</view>
|
||||||
|
<text lines="1" decode="true" class="text_32">单买价 ¥{{ currentGG.sales_price }}/{{
|
||||||
|
currentGG.goods_unit }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="section_3">
|
||||||
|
<text lines="1" class="text_34">距结束还剩</text>
|
||||||
|
<view class="box_16">
|
||||||
|
<view class="timeBox">
|
||||||
|
<view class="dayTimeBox">{{ endTheCountdownDay }}天</view>
|
||||||
|
<view class="timeBox">
|
||||||
|
<view class="time">{{ endTheCountdownHour }}</view>
|
||||||
|
<view>:</view>
|
||||||
|
</view>
|
||||||
|
<view class="timeBox">
|
||||||
|
<view class="time">{{ endTheCountdownMinute }}</view>
|
||||||
|
<view>:</view>
|
||||||
|
</view>
|
||||||
|
<view class="timeBox">
|
||||||
|
<view class="time">{{ endTheCountdownSecond }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="Money">
|
||||||
|
<view class="MoneyMark">¥</view>
|
||||||
|
{{ currentGG.group_buy_price }}
|
||||||
|
<view class="MoneyUnit">/{{ currentGG.goods_unit }}</view>
|
||||||
|
<view class="num">已售{{ soldOutNum }} | 剩余{{ currentGG.total_stock }}</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 规格 -->
|
||||||
|
<!-- @click="changeGG2(item, index)" :class="index == currentGGIndex ? 'active' : ''"> -->
|
||||||
|
<view class="GGBox">
|
||||||
|
<view class="GG_left">
|
||||||
|
<view 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 }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="GG_rigth" v-if="info.commodity_goods_info_list && info.commodity_goods_info_list.length > 0">
|
||||||
|
共{{ info.commodity_goods_info_list.length }}款
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="Tit">
|
||||||
|
<view class="tag tag-text" v-if="
|
||||||
|
currentGG.is_same_day
|
||||||
|
">当日达</view>
|
||||||
|
{{ currentGG.goods_name }}
|
||||||
|
</view>
|
||||||
|
<view class="Msg">{{ currentGG.commodity_brief }}</view>
|
||||||
|
|
||||||
|
<view class="fenge"></view>
|
||||||
|
|
||||||
|
<!-- 已购买区域 -->
|
||||||
|
<view>
|
||||||
|
<view class="purchase-area">
|
||||||
|
<view class="purchase-count">{{ totalCount }}人已购买</view>
|
||||||
|
<view class="view-more" @click="showPurchaseRecords">查看更多 ></view>
|
||||||
|
</view>
|
||||||
|
<view class="record-list">
|
||||||
|
<view class="record-item" v-for="(record, index) in purchaseRecords" :key="index">
|
||||||
|
<view class="record-user">
|
||||||
|
<image :src="record.avatar" class="user-avatar"></image>
|
||||||
|
<view class="user-name">{{ record.nick_name }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="record-amount">
|
||||||
|
{{ formatDate(record.buy_time) }}买了{{ record.count }}件
|
||||||
|
</view>
|
||||||
|
<view class="record-time">
|
||||||
|
<button class="buy-btn" @click="goSubmit">去下单</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="fenge"></view>
|
||||||
|
|
||||||
|
<h3 class="GoodsMsg">商品详情</h3>
|
||||||
|
|
||||||
|
<view class="Msg_Item">
|
||||||
|
<view class="Msg_ItemTit">货号</view>
|
||||||
|
<view 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>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="Msg_Item">
|
||||||
|
<view class="Msg_ItemTit">规格说明</view>
|
||||||
|
<view class="Msg_ItemCon">{{ currentGG.goods_spec }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="Msg_Item">
|
||||||
|
<view class="Msg_ItemTit">售卖单位</view>
|
||||||
|
<view class="Msg_ItemCon">{{ currentGG.goods_unit }}</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="GoosMsg">
|
||||||
|
<image v-for="item in currentGG.goods_detail_pic" :src="picUrl + item" :key="item" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="priceInfo">
|
||||||
|
<h3 class="priceInfo-title">价格说明</h3>
|
||||||
|
<view class="priceInfo-content">
|
||||||
|
<view>
|
||||||
|
<text class="priceInfo-content-title">划线价格:</text>
|
||||||
|
指商品的厂商指导价、正品零售价、市面常见价或该商品曾经展示过的销售价等,并非原价。仅供参考。
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<text class="priceInfo-content-title">未划线价格:</text>
|
||||||
|
指商品的实时价格,不因表述的差异改变性质,具体成交价格根据商品参加活动,或使用优惠券等发生变化最终以订单结算价格为准。
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部购物车 -->
|
||||||
|
<view class="Car">
|
||||||
|
<view class="car_left">
|
||||||
|
<view class="share" @click="share">
|
||||||
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share.png"
|
||||||
|
mode="widthFix"></image>
|
||||||
|
分享
|
||||||
|
</view>
|
||||||
|
<view 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>
|
||||||
|
购物车
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="car_right2" v-if="info.commodity_goods_info_list[currentGGIndex].total_stock < 1">
|
||||||
|
已售罄
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="car_right" v-if="
|
||||||
|
info.commodity_goods_info_list[currentGGIndex].total_stock > 0 &&
|
||||||
|
(!info.commodity_goods_info_list[currentGGIndex].cart_count ||
|
||||||
|
info.commodity_goods_info_list[currentGGIndex].cart_count.count == 0)
|
||||||
|
" @click="addCar">
|
||||||
|
加入购物车
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="car_right" @click="changeCar" v-if="
|
||||||
|
info.commodity_goods_info_list[currentGGIndex].cart_count.count > 0
|
||||||
|
&& info.commodity_goods_info_list[currentGGIndex].total_stock > 0
|
||||||
|
">
|
||||||
|
加入购物车
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 分享 -->
|
||||||
|
<view class="shadow" @click.stop="changeShadow" v-if="boxshadow1">
|
||||||
|
<view class="shadowBox1">
|
||||||
|
<view class="shadowBox1Item" @click="shareFriend">
|
||||||
|
<button class="shadowBox1Item_btn" open-type="share" bindtap="onShareButtonClick">
|
||||||
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_WX.png"
|
||||||
|
mode="aspectFill"></image>
|
||||||
|
微信好友
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
<view class="shadowBox1Item" @click="openSave">
|
||||||
|
<button class="shadowBox1Item_btn">
|
||||||
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_saveImg.png"
|
||||||
|
mode="aspectFill"></image>
|
||||||
|
生成海报
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 海报 -->
|
||||||
|
<view class="shadow" @click="changeShadow2" v-if="boxshadow2">
|
||||||
|
<view class="shadowBox2">
|
||||||
|
<view class="shadowBox_img">
|
||||||
|
<view class="boxshadow_tit">今日商品推荐</view>
|
||||||
|
<view class="boxshadow_img">
|
||||||
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_img.png">
|
||||||
|
</image>
|
||||||
|
</view>
|
||||||
|
<view class="line"></view>
|
||||||
|
<view class="shadowBoxInfo">
|
||||||
|
<view class="shadowboxInfo_left">二维码</view>
|
||||||
|
<view class="shadowboxInfo_right">
|
||||||
|
<view class="shadowboxInfo_right_1">正鲜生</view>
|
||||||
|
<view class="shadowboxInfo_right_2">
|
||||||
|
长按识别小程序 <br />
|
||||||
|
数量有限马上抢购
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="shadowBox_btn" @click.stop="saveImg">保存海报</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 评价 查看详情 -->
|
||||||
|
<!-- <u-popup :show="show" round="20rpx" mode="bottom" @close="close" @open="open" :z-index="10070">
|
||||||
|
<view class="reviews-section">
|
||||||
|
<view class="popup-header">
|
||||||
|
<h3 class="popup-header-h3">评价</h3>
|
||||||
|
<view class="popup-header-view" @click="close">取消</view>
|
||||||
|
</view>
|
||||||
|
<view class="temp">
|
||||||
|
<view class="temp1">
|
||||||
|
<img class="temp_img" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/pingjia.png" />
|
||||||
|
为你展示真实评价
|
||||||
|
</view>
|
||||||
|
<view class="temp1" @click="showSizePopup">
|
||||||
|
款式
|
||||||
|
<img class="temp_img1" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/kuanshi.png" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="reviews-list" v-if="comments.length > 0">
|
||||||
|
<view class="review-item" v-for="(comment, index) in comments" :key="index">
|
||||||
|
<view class="review-user">
|
||||||
|
<image :src="comment.avatar" class="user-avatar"></image>
|
||||||
|
<view class="user-info">
|
||||||
|
<view class="user-name">{{ comment.username }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="review-time">{{ comment.time }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="user-purchase">已购 {{ comment.product }}</view>
|
||||||
|
<view class="review-content">{{ comment.content }}</view>
|
||||||
|
<view class="review-images" v-if="comment.images.length > 0">
|
||||||
|
<image :src="img" class="review-img" v-for="(img, idx) in comment.images" :key="idx"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-popup> -->
|
||||||
|
|
||||||
|
<!-- 团购记录弹窗 -->
|
||||||
|
<u-popup :show="showPurchase" round="20rpx" mode="bottom" @close="closePurchase">
|
||||||
|
<view class="purchase-popup">
|
||||||
|
<view class="popup-header">
|
||||||
|
<h3 class="popup-header-h3">团购记录</h3>
|
||||||
|
<view class="popup-header-view" @click="closePurchase">取消</view>
|
||||||
|
</view>
|
||||||
|
<view class="purchase-records">
|
||||||
|
<view class="record-header">
|
||||||
|
<view class="record-header-item">买家</view>
|
||||||
|
<view class="record-header-item">数量</view>
|
||||||
|
<view class="record-header-item">购买时间</view>
|
||||||
|
</view>
|
||||||
|
<view class="record-list">
|
||||||
|
<view class="record-item" v-for="(record, index) in purchaseRecords" :key="index">
|
||||||
|
<view class="record-user">
|
||||||
|
<image :src="record.avatar" class="user-avatar"></image>
|
||||||
|
<view class="user-name">{{ record.nick_name }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="record-amount">+{{ record.count }}</view>
|
||||||
|
<view class="record-time">{{ record.buy_time }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
|
||||||
|
<!-- 选择款式 -->
|
||||||
|
<u-popup :show="showSize" round="20rpx" mode="bottom" @close="closeSize">
|
||||||
|
<view class="popup-header">
|
||||||
|
<h3 class="popup-header-h3">选择款式</h3>
|
||||||
|
<view class="popup-header-view" @click="closeSize">取消</view>
|
||||||
|
</view>
|
||||||
|
<view class="itemSize_top">
|
||||||
|
<image :src="changeImg" class="itemSize-img"></image>
|
||||||
|
<view class="itemSize_info">
|
||||||
|
<view class="itemSize_name">{{ changeName }}</view>
|
||||||
|
<view class="itemSize_price">¥{{ changePrice }}/袋</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="itemSize" v-for="(item, index) in info.commodity_goods_info_list" :key="item.id"
|
||||||
|
@click="changeGG(item, index)" :class="index == currentGGIndex ? 'itemSize_active' : ''">
|
||||||
|
{{ item.goods_name }} {{ item.goods_spec }} / {{ item.goods_unit }}
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { apiArr } from "../../../api/shop";
|
||||||
|
import { apiArr as apiArr2 } from "../../../api/groupPurchase";
|
||||||
|
import { picUrl, menuButtonInfo, request, NavgateTo } from "../../../utils";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
itemObj: {},
|
||||||
|
|
||||||
|
picUrl,
|
||||||
|
top: "",
|
||||||
|
localHeight: "",
|
||||||
|
carNum: "",
|
||||||
|
prevCarNum: "",
|
||||||
|
currentNum: "0", //当前商品的数量
|
||||||
|
type: "error",
|
||||||
|
boxshadow1: false,
|
||||||
|
boxshadow2: false,
|
||||||
|
id: "",
|
||||||
|
groupById: "",
|
||||||
|
info: "",
|
||||||
|
currentIndex: "1", //当前轮播图
|
||||||
|
|
||||||
|
currentGG: "", //当前选中规格
|
||||||
|
currentGGIndex: "", //当前规格index
|
||||||
|
|
||||||
|
carOrderList: [],
|
||||||
|
// 新增评论数据
|
||||||
|
showReviewPopup: false,
|
||||||
|
soldOutNum: 0,
|
||||||
|
|
||||||
|
show: false,
|
||||||
|
showSize: false,
|
||||||
|
showPurchase: false,
|
||||||
|
purchaseRecords: [],
|
||||||
|
totalCount: 0,
|
||||||
|
changeImg: "",
|
||||||
|
changeName: "",
|
||||||
|
changePrice: "",
|
||||||
|
|
||||||
|
endTime: "",
|
||||||
|
endTheCountdownDay: '',
|
||||||
|
endTheCountdownHour: '',
|
||||||
|
endTheCountdownMinute: '',
|
||||||
|
endTheCountdownSecond: '',
|
||||||
|
timer: null, // 定时器ID
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 显示团购记录
|
||||||
|
showPurchaseRecords() {
|
||||||
|
if (this.purchaseRecords.length > 0) {
|
||||||
|
this.showPurchase = true;
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: '没有更多数据',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 关闭团购记录
|
||||||
|
closePurchase() {
|
||||||
|
this.showPurchase = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
//去下单
|
||||||
|
goSubmit() {
|
||||||
|
NavgateTo('/packages/shop/groupPurchaseSubmit/index')
|
||||||
|
},
|
||||||
|
|
||||||
|
changeIndex(e) {
|
||||||
|
this.currentIndex = e.detail.current + 1;
|
||||||
|
},
|
||||||
|
|
||||||
|
back() {
|
||||||
|
uni.navigateBack({
|
||||||
|
delta: 1,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 分享给微信好友方法 - 触发分享给好友的聊天框
|
||||||
|
shareFriend() {
|
||||||
|
this.boxshadow1 = false; // 关闭分享弹窗
|
||||||
|
|
||||||
|
// 获取当前商品的分享信息
|
||||||
|
const shareInfo = {
|
||||||
|
title: this.currentGG.goods_name || '商品分享', // 分享标题
|
||||||
|
desc: this.currentGG.commodity_brief || '快来看看这款商品吧', // 分享描述
|
||||||
|
link: `${window.location.origin}/pages/goodsDetail/index?id=${this.id}`, // 商品详情页链接
|
||||||
|
imageUrl: this.picUrl + (this.currentGG.goods_carousel && this.currentGG.goods_carousel[0] || '') // 分享图片
|
||||||
|
};
|
||||||
|
|
||||||
|
// 判断环境是否支持微信分享
|
||||||
|
if (typeof WeixinJSBridge === 'undefined') {
|
||||||
|
// 尝试使用uni的分享API作为备选方案
|
||||||
|
if (typeof uni.share !== 'undefined') {
|
||||||
|
uni.share({
|
||||||
|
provider: 'weixin',
|
||||||
|
scene: 'WXSceneSession',
|
||||||
|
type: 0,
|
||||||
|
title: shareInfo.title,
|
||||||
|
summary: shareInfo.desc,
|
||||||
|
href: shareInfo.link,
|
||||||
|
imageUrl: shareInfo.imageUrl,
|
||||||
|
success: () => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '分享成功',
|
||||||
|
icon: 'success',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.error('分享失败', err);
|
||||||
|
uni.showToast({
|
||||||
|
title: '分享失败,请重试',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请在微信客户端打开',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 主动触发微信分享给好友聊天框
|
||||||
|
WeixinJSBridge.invoke('sendAppMessage', {
|
||||||
|
title: shareInfo.title,
|
||||||
|
desc: shareInfo.desc,
|
||||||
|
link: shareInfo.link,
|
||||||
|
img_url: shareInfo.imageUrl,
|
||||||
|
img_width: '120',
|
||||||
|
img_height: '120',
|
||||||
|
type: 'link',
|
||||||
|
data_url: ''
|
||||||
|
}, (res) => {
|
||||||
|
if (res.err_msg === 'sendAppMessage:ok') {
|
||||||
|
uni.showToast({
|
||||||
|
title: '分享成功',
|
||||||
|
icon: 'success',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
} else if (res.err_msg === 'sendAppMessage:cancel') {
|
||||||
|
uni.showToast({
|
||||||
|
title: '已取消分享',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
console.error('分享失败', res);
|
||||||
|
uni.showToast({
|
||||||
|
title: '分享失败,请重试',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('调用微信分享接口失败', error);
|
||||||
|
// 降级处理:使用wx.ready方式作为备选
|
||||||
|
if (typeof wx !== 'undefined') {
|
||||||
|
wx.ready(() => {
|
||||||
|
// 设置分享给微信好友的回调
|
||||||
|
wx.onMenuShareAppMessage({
|
||||||
|
title: shareInfo.title,
|
||||||
|
desc: shareInfo.desc,
|
||||||
|
link: shareInfo.link,
|
||||||
|
imgUrl: shareInfo.imageUrl,
|
||||||
|
type: 'link',
|
||||||
|
success: () => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '分享成功',
|
||||||
|
icon: 'success',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
},
|
||||||
|
cancel: () => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '已取消分享',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.error('分享失败', err);
|
||||||
|
uni.showToast({
|
||||||
|
title: '分享失败,请重试',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// 提示用户点击右上角分享
|
||||||
|
uni.showToast({
|
||||||
|
title: '请点击右上角分享按钮',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
wx.error((err) => {
|
||||||
|
console.error('微信JS-SDK初始化失败', err);
|
||||||
|
uni.showToast({
|
||||||
|
title: '分享功能加载失败',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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() {
|
||||||
|
const params = {
|
||||||
|
id: this.id,
|
||||||
|
group_buy_activity_id: this.groupById
|
||||||
|
}
|
||||||
|
request(apiArr.getGoodsInfo, "POST", params).then((res) => {
|
||||||
|
// 分割图片
|
||||||
|
res.commodity_goods_info_list.forEach((item) => {
|
||||||
|
item.goods_detail_pic = item.goods_detail_pic ? item.goods_detail_pic.split(",") : [];
|
||||||
|
item.goods_carousel = item.goods_carousel ? item.goods_carousel.split(",") : [];
|
||||||
|
item.commodity_pic = item.commodity_pic ? item.commodity_pic.split(",") : [];
|
||||||
|
});
|
||||||
|
|
||||||
|
//根据购物车列表 和 当前商品列表 来更新当前商品列表在购物车中的数量
|
||||||
|
if (this.carOrderList) {
|
||||||
|
this.carOrderList.forEach((items) => {
|
||||||
|
res.commodity_goods_info_list.forEach((item) => {
|
||||||
|
if (items.goods_id == item.id) {
|
||||||
|
item.cart_count = { count: 0 };
|
||||||
|
item.cart_count.count = items.count;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentTime = new Date().getTime();
|
||||||
|
|
||||||
|
// 过滤掉group_buy_activity_info为空的数据
|
||||||
|
if (res.commodity_goods_info_list && Array.isArray(res.commodity_goods_info_list)) {
|
||||||
|
res.commodity_goods_info_list = res.commodity_goods_info_list.filter(item => {
|
||||||
|
const startTime = new Date(item.group_buy_activity_info?.start_time).getTime();
|
||||||
|
const endTime = new Date(item.group_buy_activity_info?.end_time).getTime();
|
||||||
|
return item.group_buy_activity_info !== null && currentTime >= startTime && currentTime <= endTime
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.info = res;
|
||||||
|
|
||||||
|
// 确保商品列表不为空
|
||||||
|
if (this.itemObj) {
|
||||||
|
// 对 itemObj 进行图片分割处理
|
||||||
|
this.itemObj.goods_detail_pic = this.itemObj.goods_detail_pic ? this.itemObj.goods_detail_pic.split(",") : [];
|
||||||
|
this.itemObj.goods_carousel = this.itemObj.goods_carousel ? this.itemObj.goods_carousel.split(",") : [];
|
||||||
|
this.itemObj.commodity_pic = this.itemObj.commodity_pic ? this.itemObj.commodity_pic.split(",") : [];
|
||||||
|
|
||||||
|
this.currentGG = this.itemObj;
|
||||||
|
// 根据itemObj在商品列表中找到对应的索引
|
||||||
|
this.currentGGIndex = this.info && this.info.commodity_goods_info_list
|
||||||
|
? this.info.commodity_goods_info_list.findIndex(item => item.id === this.itemObj.id)
|
||||||
|
: 0;
|
||||||
|
|
||||||
|
// 如果没找到匹配项,默认为0
|
||||||
|
if (this.currentGGIndex === -1) {
|
||||||
|
this.currentGGIndex = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.changeImg = this.currentGG.commodity_pic[0];
|
||||||
|
this.changeName = this.currentGG.goods_alias;
|
||||||
|
this.changePrice = this.currentGG.sales_price;
|
||||||
|
} else {
|
||||||
|
// 商品列表为空时的处理
|
||||||
|
this.currentGG = null;
|
||||||
|
this.currentGGIndex = 0;
|
||||||
|
this.changeImg = '';
|
||||||
|
this.changeName = '';
|
||||||
|
this.changePrice = '';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
copys(e) {
|
||||||
|
uni.setClipboardData({
|
||||||
|
data: e,
|
||||||
|
success: (res) => {
|
||||||
|
uni.showToast({
|
||||||
|
title: "复制成功",
|
||||||
|
icon: "success",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 切换规格
|
||||||
|
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 };
|
||||||
|
}
|
||||||
|
this.changeImg = item.commodity_pic[0]
|
||||||
|
this.changeName = item.goods_alias
|
||||||
|
this.changePrice = item.sales_price
|
||||||
|
},
|
||||||
|
car() {
|
||||||
|
const item = {
|
||||||
|
is_group_buy: 1,
|
||||||
|
}
|
||||||
|
NavgateTo("../shopCar/index?item=" + JSON.stringify(item));
|
||||||
|
},
|
||||||
|
|
||||||
|
//获取购物车数量
|
||||||
|
getShopCar() {
|
||||||
|
request(apiArr.getCarCount, "POST", {}).then((res) => {
|
||||||
|
this.carNum = res.total;
|
||||||
|
this.prevCarNum = res.total;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
getShopCarList() {
|
||||||
|
const params = {
|
||||||
|
is_group_buy: 1,
|
||||||
|
}
|
||||||
|
return request(apiArr.getCar, "POST", params).then((res) => {
|
||||||
|
// 合并当日达和普通商品数据
|
||||||
|
this.carOrderList = [].concat(res.same_day_cart_list, res.normal_cart_list)
|
||||||
|
.flatMap(supplier => supplier.commodity_cart_and_goods_model);
|
||||||
|
return res;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
addCar() {
|
||||||
|
let that = this;
|
||||||
|
this.info.commodity_goods_info_list[this.currentGGIndex].cart_count = {
|
||||||
|
count: this.info.commodity_goods_info_list[this.currentGGIndex].min_order_quantity,
|
||||||
|
};
|
||||||
|
// this.info.commodity_goods_info_list.forEach((item) => {
|
||||||
|
// console.log(item.cart_count);
|
||||||
|
// goods_id_and_count.push({
|
||||||
|
// goods_id: item.id,
|
||||||
|
// count: item.cart_count ? item.cart_count.count : 0,
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
|
||||||
|
let countVal = this.info.commodity_goods_info_list[this.currentGGIndex].min_order_quantity
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
goods_id_and_count: [
|
||||||
|
{
|
||||||
|
goods_id:
|
||||||
|
this.info.commodity_goods_info_list[this.currentGGIndex].id,
|
||||||
|
count: countVal,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
group_buy_id: this.info.commodity_goods_info_list[this.currentGGIndex].group_buy_activity_id,
|
||||||
|
}
|
||||||
|
request(apiArr.updateCar, "POST", params).then((res) => {
|
||||||
|
that.getShopCar();
|
||||||
|
that.getShopCarList();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 购物车更改
|
||||||
|
changeCar() {
|
||||||
|
// 获取当前商品的购物车数量,如果不存在则设为0
|
||||||
|
const currentCount = this.info.commodity_goods_info_list[this.currentGGIndex].cart_count?.count;
|
||||||
|
// 新的数量为当前数量加一
|
||||||
|
const newCount = currentCount + 1;
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
user_id: uni.getStorageSync("userId"),
|
||||||
|
goods_id_and_count: [
|
||||||
|
{
|
||||||
|
goods_id: this.info.commodity_goods_info_list[this.currentGGIndex].id,
|
||||||
|
count: newCount,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
group_buy_id: this.info.commodity_goods_info_list[this.currentGGIndex].group_buy_activity_id,
|
||||||
|
};
|
||||||
|
|
||||||
|
request(apiArr.updateCar, "POST", params).then((res) => {
|
||||||
|
this.getShopCarList();
|
||||||
|
uni.showToast({
|
||||||
|
title: "操作成功!",
|
||||||
|
success() { },
|
||||||
|
});
|
||||||
|
this.getShopCar();
|
||||||
|
this.getGoodsInfo();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
showPopup() {
|
||||||
|
this.show = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
showSizePopup() {
|
||||||
|
this.showSize = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
close() {
|
||||||
|
this.show = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
closeSize() {
|
||||||
|
this.showSize = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 购买记录
|
||||||
|
getBuyRecord() {
|
||||||
|
const params = {
|
||||||
|
activity_id: 47,
|
||||||
|
goods_id: this.id
|
||||||
|
}
|
||||||
|
request(apiArr2.groupBuyRecord, 'POST', params).then(res => {
|
||||||
|
const record = res.group_buy_record.map(item => {
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
avatar: picture + item.avatar
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.purchaseRecords = record
|
||||||
|
this.totalCount = res.total_count
|
||||||
|
// 计算所有item.count的总和并赋值给soldOutNum
|
||||||
|
this.soldOutNum = record.reduce((total, item) => total + (item.count || 0), 0)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
formatDate(dateStr) {
|
||||||
|
if (!dateStr) return '';
|
||||||
|
const date = new Date(dateStr);
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||||
|
const day = String(date.getDate()).padStart(2, '0');
|
||||||
|
return `${month}月${day}日`;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 计算距离结束日期的剩余时间
|
||||||
|
getEndTheCountdown(endTime) {
|
||||||
|
// 获取当前时间和结束时间的时间戳
|
||||||
|
const now = new Date().getTime();
|
||||||
|
const end = new Date(endTime).getTime();
|
||||||
|
|
||||||
|
// 计算时间差(毫秒)
|
||||||
|
let diff = end - now;
|
||||||
|
|
||||||
|
// 如果已经结束,返回提示
|
||||||
|
if (diff <= 0) {
|
||||||
|
return '团购已结束';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算距离结束时间
|
||||||
|
this.endTheCountdownDay = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||||
|
diff -= this.endTheCountdownDay * (1000 * 60 * 60 * 24);
|
||||||
|
this.endTheCountdownHour = Math.floor(diff / (1000 * 60 * 60));
|
||||||
|
diff -= this.endTheCountdownHour * (1000 * 60 * 60);
|
||||||
|
this.endTheCountdownMinute = Math.floor(diff / (1000 * 60));
|
||||||
|
diff -= this.endTheCountdownMinute * (1000 * 60);
|
||||||
|
this.endTheCountdownSecond = Math.floor(diff / (1000));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
this.itemObj = JSON.parse(decodeURIComponent(options.item));
|
||||||
|
const meun = menuButtonInfo();
|
||||||
|
this.top = meun.top;
|
||||||
|
this.localHeight = meun.height;
|
||||||
|
this.id = this.itemObj.commodity_id ? this.itemObj.commodity_id : this.itemObj.id;
|
||||||
|
this.groupById = this.itemObj.groupById
|
||||||
|
if (this.itemObj.commodity_id) {
|
||||||
|
this.endTime = this.itemObj.group_buy_activity_info.end_time
|
||||||
|
} else {
|
||||||
|
this.endTime = this.itemObj.group_buy_goods_list[0].group_buy_activity_info.end_time
|
||||||
|
}
|
||||||
|
this.getBuyRecord()
|
||||||
|
this.getEndTheCountdown(this.endTime)
|
||||||
|
|
||||||
|
// 启动定时器,每秒更新一次倒计时
|
||||||
|
this.timer = setInterval(() => {
|
||||||
|
this.getEndTheCountdown(this.endTime)
|
||||||
|
}, 1000)
|
||||||
|
},
|
||||||
|
onReachBottom() { },
|
||||||
|
onShow() {
|
||||||
|
// 确保getShopCarList完成后再执行getGoodsInfo
|
||||||
|
this.getShopCarList().then(() => {
|
||||||
|
this.getGoodsInfo();
|
||||||
|
});
|
||||||
|
this.getShopCar();
|
||||||
|
},
|
||||||
|
|
||||||
|
//离开页面的时候直接更新购物车数量(目前接口是 传入商品id 数量。如果有当前商品就更新数量。如果没有就增加商品。如果删除某个商品 count 为0 就删除)
|
||||||
|
onHide() {
|
||||||
|
// 清除定时器
|
||||||
|
if (this.timer) {
|
||||||
|
clearInterval(this.timer)
|
||||||
|
this.timer = null
|
||||||
|
}
|
||||||
|
|
||||||
|
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 ? item.cart_count.count : 0,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// request(apiArr.updateCar, "POST", {
|
||||||
|
// goods_id_and_count,
|
||||||
|
// }).then((res) => {
|
||||||
|
// console.log("Cart updated on hide");
|
||||||
|
// });
|
||||||
|
return;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url("./index.css");
|
||||||
|
</style>
|
||||||
518
packages/shop/groupPurchaseSubmit/index.css
Normal file
518
packages/shop/groupPurchaseSubmit/index.css
Normal file
@ -0,0 +1,518 @@
|
|||||||
|
page {
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 顶部切换栏 */
|
||||||
|
.tab-bar {
|
||||||
|
display: flex;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-item {
|
||||||
|
width: 180rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
line-height: 70rpx;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 15rpx;
|
||||||
|
margin: 0 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
border: 1rpx solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-item.active {
|
||||||
|
background-color: #ff370b;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 分隔线 */
|
||||||
|
.divider {
|
||||||
|
height: 20rpx;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 公共标题样式 */
|
||||||
|
.section-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 收货地址区域 */
|
||||||
|
.info-section {
|
||||||
|
background: repeating-linear-gradient(to right,
|
||||||
|
#fe5355,
|
||||||
|
#fe5355 20px,
|
||||||
|
#549aff 20px,
|
||||||
|
#549aff 40px);
|
||||||
|
padding: 10rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-section {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-info {
|
||||||
|
padding: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-main {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-name-phone {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 32rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-detail {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
line-height: 40rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-arrow {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 商品信息区域 */
|
||||||
|
.goods-section {
|
||||||
|
background-color: #fff;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-item {
|
||||||
|
border-radius: 10rpx;
|
||||||
|
padding: 15rpx;
|
||||||
|
display: flex;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-image {
|
||||||
|
width: 140rpx;
|
||||||
|
height: 140rpx;
|
||||||
|
border-radius: 15rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-image image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-info {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-desc {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-price {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #e63946;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
/* display: flex; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-price-box {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-price1 {
|
||||||
|
width: 100rpx;
|
||||||
|
padding: 10rpx 15rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #fc5d15;
|
||||||
|
border-radius: 15rpx 0 0 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-price2 {
|
||||||
|
width: auto;
|
||||||
|
padding: 10rpx 15rpx;
|
||||||
|
background: linear-gradient(to bottom, #fef6d6, #fee8a9);
|
||||||
|
border-radius: 0 15rpx 15rpx 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.original-price {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown {
|
||||||
|
width: 250rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
padding: 10rpx 15rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
background-color: #fe2f01;
|
||||||
|
position: absolute;
|
||||||
|
top: 150rpx;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quantity-control {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decrease-btn {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border: 1rpx solid #ccc;
|
||||||
|
border-radius: 50%;
|
||||||
|
line-height: 33rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.increase-btn {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
background-color: #ff502a;
|
||||||
|
border-radius: 50%;
|
||||||
|
line-height: 33rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quantity {
|
||||||
|
margin: 0 15rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
width: 40rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 运费和总金额区域 */
|
||||||
|
.fee-section,
|
||||||
|
.total-section {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fee-name,
|
||||||
|
.total-name {
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fee-value,
|
||||||
|
.total-value {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-value {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #FF7658;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 复制 */
|
||||||
|
.copy-icon {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background-image: url('https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/copy.png');
|
||||||
|
background-size: cover;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 支付方式区域 */
|
||||||
|
.payment-section {
|
||||||
|
background-color: #fff;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
margin-top: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-item {
|
||||||
|
padding: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-icon {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-icon image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-content {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-name {
|
||||||
|
font-size: 32rpx;
|
||||||
|
margin-bottom: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-desc {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-select {
|
||||||
|
color: #FF7658;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 立即支付按钮 */
|
||||||
|
.pay-button {
|
||||||
|
height: 100rpx;
|
||||||
|
line-height: 100rpx;
|
||||||
|
text-align: center;
|
||||||
|
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 50rpx;
|
||||||
|
left: 15%;
|
||||||
|
width: 70%;
|
||||||
|
/* z-index: 99; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 自提样式 */
|
||||||
|
.pickup-info {
|
||||||
|
padding: 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pickup-address {
|
||||||
|
font-size: 30rpx;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pickup-time {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 弹窗 */
|
||||||
|
.shadow {
|
||||||
|
background: rgba(0, 0, 0, 0.4);
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadowBox2 {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadowBox_img {
|
||||||
|
width: 600rpx;
|
||||||
|
height: 500rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boxshadow_tit {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #222222;
|
||||||
|
padding-top: 40rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boxshadow_tit_img {
|
||||||
|
width: 70rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boxshadow_img {
|
||||||
|
/* width: 300rpx;
|
||||||
|
height: 300rpx; */
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 40rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boxbottom {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 50rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line1 {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 1rpx;
|
||||||
|
margin: 0 10rpx;
|
||||||
|
background: linear-gradient(to left, #333, #fff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.line2 {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 1rpx;
|
||||||
|
margin: 0 10rpx;
|
||||||
|
background: linear-gradient(to right, #333, #fff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadowBox1 {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadowBox1Item_btn{
|
||||||
|
width: 110rpx;
|
||||||
|
height: 150rpx;
|
||||||
|
border: 1rpx solid red;
|
||||||
|
position: absolute;
|
||||||
|
left: 100rpx;
|
||||||
|
opacity:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadowBox2Item_btn{
|
||||||
|
width: 110rpx;
|
||||||
|
height: 150rpx;
|
||||||
|
border: 1rpx solid red;
|
||||||
|
position: absolute;
|
||||||
|
right: 100rpx;
|
||||||
|
opacity:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadowBox1Item {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadowBox1Item image {
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
margin-bottom: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-tip{
|
||||||
|
height: 200rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 200rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
786
packages/shop/groupPurchaseSubmit/index.vue
Normal file
786
packages/shop/groupPurchaseSubmit/index.vue
Normal file
@ -0,0 +1,786 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 顶部切换栏 -->
|
||||||
|
<view class="tab-bar">
|
||||||
|
<!-- <view :class="{ active: activeTab === 'delivery' }" class="tab-item" @click="switchTab('delivery')">配送
|
||||||
|
</view> -->
|
||||||
|
<view :class="{ active: activeTab === 'pickup' }" class="tab-item" @click="switchTab('pickup')">自提</view>
|
||||||
|
</view>
|
||||||
|
<!-- 分隔线 -->
|
||||||
|
<view class="divider"></view>
|
||||||
|
<!-- 配送/自提信息 -->
|
||||||
|
<view class="info-section" v-if="activeTab === 'delivery'">
|
||||||
|
<view class="address-section">
|
||||||
|
<view class="section-title">收货地址</view>
|
||||||
|
<view class="address-info" @click="chooseAddress" v-if="defAddress">
|
||||||
|
<view class="address-main">
|
||||||
|
<view class="address-name-phone">
|
||||||
|
<text class="name">{{ defAddress.name }}</text>
|
||||||
|
<text class="phone">{{ defAddress.phone }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="address-detail">
|
||||||
|
{{ defAddress.address }}{{ defAddress.house_number }}
|
||||||
|
<view class="copy-icon" @click.stop="copyAddress" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="address-arrow"><u-icon name="arrow-right" size="25"></u-icon></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 分隔线 -->
|
||||||
|
<view class="divider"></view>
|
||||||
|
<!-- 商品信息 -->
|
||||||
|
<view v-if="activeTab === 'delivery' && orderList1.length > 0">
|
||||||
|
<view class="goods-list">
|
||||||
|
<view class="goods-item" v-for="(item, index) in orderList1" :key="index">
|
||||||
|
<view class="goods-image">
|
||||||
|
<image :src="item.commodity_goods_info.commodity_pic" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="goods-info">
|
||||||
|
<view class="goods-name">{{ item.commodity_goods_info.goods_name }}</view>
|
||||||
|
<view class="goods-desc">{{ item.commodity_goods_info.goods_spec }}</view>
|
||||||
|
<view class="price-container">
|
||||||
|
<view class="group-price">
|
||||||
|
<view>¥{{ item.commodity_goods_info.sales_price }}/{{
|
||||||
|
item.commodity_goods_info.goods_unit
|
||||||
|
}}</view>
|
||||||
|
<!-- 运费 -->
|
||||||
|
<view class="goods-desc" style="margin-top: 10rpx;">运费 ¥{{
|
||||||
|
item.commodity_goods_info.freight }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="quantity-control">
|
||||||
|
<view class="decrease-btn" @tap.stop="decreaseQuantity(item)">-</view>
|
||||||
|
<view class="quantity">{{ item.count }}</view>
|
||||||
|
<view class="increase-btn" @tap.stop="increaseQuantity(item)">+</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 运费 -->
|
||||||
|
<!-- <view class="fee-section">
|
||||||
|
<view class="fee-name">运费</view>
|
||||||
|
<view class="fee-value">¥{{ item.commodity_goods_info.freight }}</view>
|
||||||
|
</view> -->
|
||||||
|
<!-- 总金额 -->
|
||||||
|
<view class="total-section">
|
||||||
|
<view class="total-name">总金额</view>
|
||||||
|
<view class="total-value">¥{{ calculateTotal('order1') }}</view>
|
||||||
|
</view>
|
||||||
|
<!-- 支付方式 -->
|
||||||
|
<view class="payment-section">
|
||||||
|
<view class="payment-item" @click="selectPayment('wechat')">
|
||||||
|
<view class="payment-icon">
|
||||||
|
<image
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
|
||||||
|
mode="aspectFit"></image>
|
||||||
|
</view>
|
||||||
|
<view class="payment-content">
|
||||||
|
<view class="payment-name">微信支付</view>
|
||||||
|
<view class="payment-desc"><text
|
||||||
|
style="color: #f03d0e;margin-right: 15rpx;">可用优惠券</text>单笔支付限额:¥10000.00</view>
|
||||||
|
</view>
|
||||||
|
<view class="payment-select" v-if="selectedPayment === 'wechat'">
|
||||||
|
<image
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png"
|
||||||
|
mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
|
||||||
|
</view>
|
||||||
|
<view class="payment-select" v-else>
|
||||||
|
<image
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png"
|
||||||
|
mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="activeTab === 'delivery' && orderList1.length == 0" class="empty-tip">
|
||||||
|
暂无商品数据
|
||||||
|
</view>
|
||||||
|
<view v-if="activeTab === 'pickup' && orderList2.length > 0">
|
||||||
|
<!-- 按供应商分组 -->
|
||||||
|
<view v-for="(group, supplierId) in supplierGroups" :key="supplierId">
|
||||||
|
<view class="goods-list">
|
||||||
|
<view class="info-section">
|
||||||
|
<view class="address-section">
|
||||||
|
<view class="section-title">自提点</view>
|
||||||
|
<view @click="editAddress(group[0])">
|
||||||
|
<view v-if="defZTAddress.length > 0">
|
||||||
|
<view v-for="(adItem, adIndex) in defZTAddress" :key="adIndex">
|
||||||
|
<view class="address-info" v-if="adItem.id == supplierId">
|
||||||
|
<view class="address-main">
|
||||||
|
<view class="address-name-phone">
|
||||||
|
<text class="name">{{ adItem.name }}</text>
|
||||||
|
<text class="phone">{{ adItem.phone }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="address-detail">
|
||||||
|
{{ adItem.address }}
|
||||||
|
<view class="copy-icon" @click.stop="copyZTAddress" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="address-arrow"><u-icon name="arrow-right" size="25"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="address-info"
|
||||||
|
v-if="!defZTAddress.some(adItem => adItem.id == supplierId)">
|
||||||
|
<view class="address-main">
|
||||||
|
<view class="address-name-phone">
|
||||||
|
<text class="name">请选择自提点</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="address-arrow"><u-icon name="arrow-right" size="25"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="address-info" v-else>
|
||||||
|
<view class="address-main">
|
||||||
|
<view class="address-name-phone">
|
||||||
|
<text class="name">请选择自提点</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="address-arrow"><u-icon name="arrow-right" size="25"></u-icon></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 该供应商下的所有商品 -->
|
||||||
|
<view class="goods-item" v-for="(item, index) in group" :key="index">
|
||||||
|
<view class="goods-image">
|
||||||
|
<image :src="item.commodity_goods_info.commodity_pic" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="goods-info">
|
||||||
|
<view class="goods-name">{{ item.commodity_goods_info.goods_name }}</view>
|
||||||
|
<view class="goods-desc">{{ item.commodity_goods_info.goods_spec }}</view>
|
||||||
|
<view class="price-container">
|
||||||
|
<view class="group-price">
|
||||||
|
<view>
|
||||||
|
<view v-if="isWithinActivityTime(item)" class="group-price-box">
|
||||||
|
<view class="group-price1">团购价</view>
|
||||||
|
<view class="group-price2">
|
||||||
|
{{ '¥' + item.commodity_goods_info.group_buy_price }}
|
||||||
|
/{{ item.commodity_goods_info.goods_unit }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-else>
|
||||||
|
{{ '¥' + item.commodity_goods_info.sales_price }}
|
||||||
|
/{{ item.commodity_goods_info.goods_unit }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 运费 -->
|
||||||
|
<!-- <view class="goods-desc" style="margin-top: 10rpx;">运费 ¥{{
|
||||||
|
item.commodity_goods_info.freight }}</view> -->
|
||||||
|
</view>
|
||||||
|
<view class="quantity-control">
|
||||||
|
<view class="decrease-btn" @tap.stop="decreaseQuantity(item)">-</view>
|
||||||
|
<view class="quantity">{{ item.count }}</view>
|
||||||
|
<view class="increase-btn" @tap.stop="increaseQuantity(item)">+</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 运费 -->
|
||||||
|
<!-- <view class="fee-section">
|
||||||
|
<view class="fee-name">运费</view>
|
||||||
|
<view class="fee-value">¥{{ item.commodity_goods_info.freight }}</view>
|
||||||
|
</view> -->
|
||||||
|
<!-- 总金额 -->
|
||||||
|
<view class="total-section">
|
||||||
|
<view class="total-name">总金额</view>
|
||||||
|
<view class="total-value">¥{{ calculateTotal('order2') }}</view>
|
||||||
|
</view>
|
||||||
|
<!-- 支付方式 -->
|
||||||
|
<view class="payment-section">
|
||||||
|
<view class="payment-item" @click="selectPayment('wechat')">
|
||||||
|
<view class="payment-icon">
|
||||||
|
<image
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
|
||||||
|
mode="aspectFit"></image>
|
||||||
|
</view>
|
||||||
|
<view class="payment-content">
|
||||||
|
<view class="payment-name">微信支付</view>
|
||||||
|
<view class="payment-desc"><text
|
||||||
|
style="color: #f03d0e;margin-right: 15rpx;">可用优惠券</text>单笔支付限额:¥10000.00</view>
|
||||||
|
</view>
|
||||||
|
<view class="payment-select" v-if="selectedPayment === 'wechat'">
|
||||||
|
<image
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png"
|
||||||
|
mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
|
||||||
|
</view>
|
||||||
|
<view class="payment-select" v-else>
|
||||||
|
<image
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png"
|
||||||
|
mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="activeTab === 'pickup' && orderList2.length == 0" class="empty-tip">
|
||||||
|
暂无商品数据
|
||||||
|
</view>
|
||||||
|
<!-- 立即支付按钮 -->
|
||||||
|
<view class="pay-button" @click="submitPayment">立即支付</view>
|
||||||
|
|
||||||
|
<!-- 弹窗 - 支付成功 -->
|
||||||
|
<view class="shadow" @click="changeShadow" v-if="boxshadow1">
|
||||||
|
<view class="shadowBox2">
|
||||||
|
<view class="shadowBox_img">
|
||||||
|
<view class="boxshadow_tit">
|
||||||
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/af_√.png"
|
||||||
|
class="boxshadow_tit_img">
|
||||||
|
</image>
|
||||||
|
已支付成功
|
||||||
|
</view>
|
||||||
|
<view class="boxshadow_img">
|
||||||
|
<view>核销码:{{ verifyCode }}</view>
|
||||||
|
<!-- <image
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_img.png">
|
||||||
|
</image> -->
|
||||||
|
</view>
|
||||||
|
<view class="boxbottom">
|
||||||
|
<view class="line1"></view>
|
||||||
|
赶快邀请好友来下单吧
|
||||||
|
<view class="line2"></view>
|
||||||
|
</view>
|
||||||
|
<view @click.stop="changeShadow">
|
||||||
|
<view class="shadowBox1">
|
||||||
|
<button class="shadowBox1Item_btn" open-type="share" bindtap="onShareButtonClick" />
|
||||||
|
<view class="shadowBox1Item">
|
||||||
|
<image
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_WX.png"
|
||||||
|
mode="aspectFill"></image>
|
||||||
|
微信好友
|
||||||
|
</view>
|
||||||
|
<button class="shadowBox2Item_btn" open-type="share" bindtap="onShareButtonClick" />
|
||||||
|
<view class="shadowBox1Item" @click="shareFriend">
|
||||||
|
<image
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_WX.png"
|
||||||
|
mode="aspectFill"></image>
|
||||||
|
小程序链接
|
||||||
|
</view>
|
||||||
|
<!-- <view class="shadowBox1Item" @click="openSave">
|
||||||
|
<image
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_saveImg.png"
|
||||||
|
mode="aspectFill"></image>
|
||||||
|
二维码海报
|
||||||
|
</view> -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 海报 -->
|
||||||
|
<view class="shadow" @click="changeShadow2" v-if="boxshadow2">
|
||||||
|
<view class="shadowBox2">
|
||||||
|
<view class="shadowBox_img">
|
||||||
|
<view class="boxshadow_tit">今日商品推荐</view>
|
||||||
|
<view class="boxshadow_img">
|
||||||
|
<image
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_img.png">
|
||||||
|
</image>
|
||||||
|
</view>
|
||||||
|
<view class="shadowBoxInfo">
|
||||||
|
<view class="shadowboxInfo_left">二维码</view>
|
||||||
|
<view class="shadowboxInfo_right">
|
||||||
|
<view class="shadowboxInfo_right_1">正鲜生</view>
|
||||||
|
<view class="shadowboxInfo_right_2">
|
||||||
|
长按识别小程序 <br />
|
||||||
|
数量有限马上抢购
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="shadowBox_btn" @click.stop="saveImg">保存海报</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { picUrl, menuButtonInfo, request, NavgateTo } from "../../../utils";
|
||||||
|
import { apiArr } from "../../../api/shop";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activeTab: 'pickup', // 默认选中自提
|
||||||
|
quantity: 1, // 商品数量
|
||||||
|
selectedPayment: 'wechat',
|
||||||
|
boxshadow1: false,
|
||||||
|
boxshadow2: false,
|
||||||
|
defAddress: {},
|
||||||
|
defZTAddress: [],
|
||||||
|
orderList1: [],
|
||||||
|
orderList2: [],
|
||||||
|
carList: [],
|
||||||
|
|
||||||
|
// 团购活动id
|
||||||
|
group_buy_activity_id: 0,
|
||||||
|
|
||||||
|
// 核销码
|
||||||
|
verifyCode: '',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 按供应商id分组商品
|
||||||
|
supplierGroups() {
|
||||||
|
const groups = {};
|
||||||
|
this.orderList2.forEach(item => {
|
||||||
|
const supplierId = item.supplier_id || 'default';
|
||||||
|
if (!groups[supplierId]) {
|
||||||
|
groups[supplierId] = [];
|
||||||
|
}
|
||||||
|
groups[supplierId].push(item);
|
||||||
|
});
|
||||||
|
return groups;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
this.carList = JSON.parse(options.shopCarList)
|
||||||
|
console.log("🚀 ~ onLoad ~ JSON.parse(options.shopCarList):", JSON.parse(options.shopCarList))
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
this.getUserAddress()
|
||||||
|
this.getZTAddress()
|
||||||
|
this.getGoodsList()
|
||||||
|
},
|
||||||
|
onUnload() {
|
||||||
|
uni.removeStorageSync('changeZTAddress')
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
switchTab(tab) {
|
||||||
|
this.activeTab = tab;
|
||||||
|
},
|
||||||
|
//用户收货地址
|
||||||
|
getUserAddress() {
|
||||||
|
request(apiArr.getUserDefAddress, "POST", {}).then(res => {
|
||||||
|
this.defAddress = res.default_address
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 商品列表
|
||||||
|
getGoodsList() {
|
||||||
|
this.orderList1 = []
|
||||||
|
this.orderList2 = []
|
||||||
|
|
||||||
|
this.carList.forEach(item => {
|
||||||
|
// 如果图片URL不是以https开头,则拼接picUrl
|
||||||
|
if (item.commodity_goods_info.commodity_pic && item.commodity_goods_info.commodity_pic.indexOf('https') !== 0) {
|
||||||
|
item.commodity_goods_info.commodity_pic = picUrl + item.commodity_goods_info.commodity_pic
|
||||||
|
}
|
||||||
|
|
||||||
|
// const list = item.commodity_goods_info.group_buy_activity_info
|
||||||
|
const list = true
|
||||||
|
if (list) {
|
||||||
|
this.orderList2.push(item)
|
||||||
|
} else {
|
||||||
|
this.orderList1.push(item)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getZTAddress() {
|
||||||
|
setTimeout(() => {
|
||||||
|
let changeAddress = uni.getStorageSync('changeZTAddress')
|
||||||
|
if (changeAddress) {
|
||||||
|
this.defZTAddress = changeAddress
|
||||||
|
}
|
||||||
|
}, 100)
|
||||||
|
},
|
||||||
|
chooseAddress() {
|
||||||
|
NavgateTo('../address/index')
|
||||||
|
},
|
||||||
|
editAddress(item) {
|
||||||
|
NavgateTo('../ztLocation/index?item=' + JSON.stringify(item));
|
||||||
|
},
|
||||||
|
decreaseQuantity(item) {
|
||||||
|
const currentTime = new Date().getTime();
|
||||||
|
const startTime = new Date(item.commodity_goods_info.group_buy_activity_info?.start_time).getTime();
|
||||||
|
const endTime = new Date(item.commodity_goods_info.group_buy_activity_info?.end_time).getTime();
|
||||||
|
if (item.count > 0) {
|
||||||
|
if (currentTime >= startTime && currentTime <= endTime) {
|
||||||
|
if (item.count == item.commodity_goods_info.min_order_quantity) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '最少购买' + item.commodity_goods_info.min_order_quantity + '件',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
item.count = 0
|
||||||
|
} else {
|
||||||
|
item.count--
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
item.count--
|
||||||
|
}
|
||||||
|
|
||||||
|
// 当数量减到0时,从carList中删除该商品
|
||||||
|
if (item.count === 0) {
|
||||||
|
const index = this.carList.findIndex(carItem => carItem.goods_id === item.goods_id);
|
||||||
|
if (index > -1) {
|
||||||
|
this.carList.splice(index, 1);
|
||||||
|
// 重新加载商品列表以更新页面显示
|
||||||
|
this.getGoodsList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.changeCart(item)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
increaseQuantity(item) {
|
||||||
|
console.log("🚀 ~ increaseQuantity ~ item:", item)
|
||||||
|
const currentTime = new Date().getTime();
|
||||||
|
const startTime = new Date(item.commodity_goods_info.group_buy_activity_info?.start_time).getTime();
|
||||||
|
const endTime = new Date(item.commodity_goods_info.group_buy_activity_info?.end_time).getTime();
|
||||||
|
|
||||||
|
if (item.count >= item.commodity_goods_info.stock_quantity) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '库存不足',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentTime >= startTime && currentTime <= endTime) {
|
||||||
|
if (item.count == 0) {
|
||||||
|
item.count += item.commodity_goods_info.min_order_quantity
|
||||||
|
} else {
|
||||||
|
if (item.count >= item.commodity_goods_info.stock_quantity) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '库存不足',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (item.count == item.commodity_goods_info.max_limit_quantity) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '一次最多购买' + item.commodity_goods_info.max_limit_quantity + '件',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
item.count++;
|
||||||
|
this.changeCart(item);
|
||||||
|
},
|
||||||
|
// 更改购物车
|
||||||
|
changeCart(item) {
|
||||||
|
const params = {
|
||||||
|
goods_id_and_count: [
|
||||||
|
{
|
||||||
|
goods_id: item.goods_id,
|
||||||
|
count: item.count,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
request(apiArr.updateCar, "POST", params).then(res => {
|
||||||
|
uni.showToast({
|
||||||
|
title: "操作成功!",
|
||||||
|
success() { },
|
||||||
|
});
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 计算总金额
|
||||||
|
calculateTotal(order) {
|
||||||
|
const currentTime = new Date().getTime();
|
||||||
|
if (order === 'order1') {
|
||||||
|
let total = 0;
|
||||||
|
this.orderList1.forEach(goods => {
|
||||||
|
// 团购活动时间判断
|
||||||
|
const startTime = new Date(goods.commodity_goods_info.group_buy_activity_info?.start_time).getTime();
|
||||||
|
const endTime = new Date(goods.commodity_goods_info.group_buy_activity_info?.end_time).getTime();
|
||||||
|
if (currentTime >= startTime && currentTime <= endTime) {
|
||||||
|
// total += goods.commodity_goods_info.group_buy_price * goods.count + goods.commodity_goods_info.freight;
|
||||||
|
total += goods.commodity_goods_info.group_buy_price * goods.count;
|
||||||
|
} else {
|
||||||
|
// total += goods.commodity_goods_info.sales_price * goods.count + goods.commodity_goods_info.freight;
|
||||||
|
total += goods.commodity_goods_info.sales_price * goods.count;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// 加运费
|
||||||
|
return total.toFixed(2);
|
||||||
|
} else {
|
||||||
|
let total = 0;
|
||||||
|
this.orderList2.forEach(goods => {
|
||||||
|
// 团购活动时间判断
|
||||||
|
const startTime = new Date(goods.commodity_goods_info.group_buy_activity_info?.start_time).getTime();
|
||||||
|
const endTime = new Date(goods.commodity_goods_info.group_buy_activity_info?.end_time).getTime();
|
||||||
|
if (currentTime >= startTime && currentTime <= endTime) {
|
||||||
|
// total += goods.commodity_goods_info.group_buy_price * goods.count + goods.commodity_goods_info.freight;
|
||||||
|
total += goods.commodity_goods_info.group_buy_price * goods.count;
|
||||||
|
} else {
|
||||||
|
// total += goods.commodity_goods_info.sales_price * goods.count + goods.commodity_goods_info.freight;
|
||||||
|
total += goods.commodity_goods_info.sales_price * goods.count;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// 加运费
|
||||||
|
return total.toFixed(2);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selectPayment(payment) {
|
||||||
|
this.selectedPayment = payment;
|
||||||
|
},
|
||||||
|
submitPayment() {
|
||||||
|
// 检查所有供应商是否都选择了自提点
|
||||||
|
const supplierIds = [...new Set(this.orderList2.map(item =>
|
||||||
|
item.supplier_id || 'default'
|
||||||
|
))];
|
||||||
|
|
||||||
|
const allHaveZTAddress = supplierIds.every(supplierId => {
|
||||||
|
const ztAddress = this.defZTAddress.find(adItem => adItem.id == supplierId);
|
||||||
|
return !!ztAddress;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!allHaveZTAddress) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请选择所有货品的自提点',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 团购活动时间判断
|
||||||
|
const currentTime = new Date().getTime();
|
||||||
|
let isGroupBuyValid = true;
|
||||||
|
|
||||||
|
// 检查所有商品是否在团购活动时间内
|
||||||
|
for (let supplierId in this.supplierGroups) {
|
||||||
|
const group = this.supplierGroups[supplierId];
|
||||||
|
for (let item of group) {
|
||||||
|
const activityInfo = item.commodity_goods_info.group_buy_activity_info;
|
||||||
|
// 如果没有团购活动信息,或者不在活动时间内,则isGroupBuyValid设为false
|
||||||
|
if (!activityInfo) {
|
||||||
|
isGroupBuyValid = false;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
const startTime = new Date(activityInfo.start_time).getTime();
|
||||||
|
const endTime = new Date(activityInfo.end_time).getTime();
|
||||||
|
if (!(currentTime >= startTime && currentTime <= endTime)) {
|
||||||
|
isGroupBuyValid = false;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!isGroupBuyValid) break;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查是否存在isafterSale属性且值为true
|
||||||
|
const hasAfterSaleItem = this.carList.some(item => item.isafterSale === true);
|
||||||
|
const orderIdFromAfterSale = hasAfterSaleItem ? this.carList.find(item => item.isafterSale === true)?.orderId : null;
|
||||||
|
|
||||||
|
// 根据平台设置不同的trans_type值
|
||||||
|
// 小程序: 71, App: 51
|
||||||
|
const systemInfo = uni.getSystemInfoSync();
|
||||||
|
let trans_type = 51; // 默认App环境
|
||||||
|
|
||||||
|
// 运行时判断是否为小程序环境
|
||||||
|
if (systemInfo.platform === 'devtools' || systemInfo.platform === 'unknown') {
|
||||||
|
trans_type = 71; // 开发工具或未知环境默认为小程序
|
||||||
|
}
|
||||||
|
|
||||||
|
// 条件编译:针对不同平台设置不同值
|
||||||
|
// #ifdef MP
|
||||||
|
trans_type = 71; // 所有小程序平台
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
trans_type = 51; // App平台
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// 如果存在isafterSale属性且为true,则跳过createOrder接口调用
|
||||||
|
if (hasAfterSaleItem && orderIdFromAfterSale) {
|
||||||
|
const param = {
|
||||||
|
order_id: orderIdFromAfterSale,
|
||||||
|
user_id: uni.getStorageSync('userId'),
|
||||||
|
trans_type: trans_type
|
||||||
|
}
|
||||||
|
request(apiArr.mergePreorder, "POST", param).then(res => {
|
||||||
|
this.handleMergePreorderResponse(res, orderIdFromAfterSale);
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// 原始逻辑:创建订单后再进行支付
|
||||||
|
const params = {
|
||||||
|
user_id: uni.getStorageSync('userId'),
|
||||||
|
is_group_buy: isGroupBuyValid,
|
||||||
|
goods_list: Object.keys(this.supplierGroups).map(supplierId => {
|
||||||
|
const group = this.supplierGroups[supplierId];
|
||||||
|
const firstItem = group[0];
|
||||||
|
|
||||||
|
// 团购活动id
|
||||||
|
this.group_buy_activity_id = firstItem.commodity_goods_info.group_buy_activity_id;
|
||||||
|
|
||||||
|
// 根据供应商id获取自提点信息
|
||||||
|
const ztAddress = this.defZTAddress.find(adItem => adItem.id == supplierId) || {};
|
||||||
|
|
||||||
|
return {
|
||||||
|
supplier_id: firstItem.supplier_id,
|
||||||
|
supplier_name: firstItem.supplier_name || '',
|
||||||
|
is_same_day: firstItem.commodity_goods_info.is_same_day,
|
||||||
|
receiving_name: ztAddress.name || '',
|
||||||
|
receiving_phone: ztAddress.phone || '',
|
||||||
|
receiving_address: ztAddress.address || '',
|
||||||
|
merchant_id: ztAddress.address_id,
|
||||||
|
group_buy_activity_id: firstItem.commodity_goods_info.group_buy_activity_id,
|
||||||
|
goods_and_count: group.map(item => {
|
||||||
|
const activityInfo = item.commodity_goods_info.group_buy_activity_info;
|
||||||
|
const isGroupBuy = activityInfo &&
|
||||||
|
currentTime >= new Date(activityInfo.start_time).getTime() &&
|
||||||
|
currentTime <= new Date(activityInfo.end_time).getTime();
|
||||||
|
return {
|
||||||
|
goods_id: item.goods_id,
|
||||||
|
count: item.count,
|
||||||
|
price: isGroupBuy ? item.commodity_goods_info.group_buy_price : item.commodity_goods_info.sales_price,
|
||||||
|
freight: item.commodity_goods_info.freight,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
request(apiArr.createOrder, "POST", params).then(resVal => {
|
||||||
|
const param = {
|
||||||
|
order_id: resVal.order_id,
|
||||||
|
user_id: uni.getStorageSync('userId'),
|
||||||
|
trans_type: trans_type
|
||||||
|
}
|
||||||
|
request(apiArr.mergePreorder, "POST", param).then(res => {
|
||||||
|
this.handleMergePreorderResponse(res, resVal.order_id);
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理mergePreorder接口的响应
|
||||||
|
handleMergePreorderResponse(res, orderId) {
|
||||||
|
if (res && res.timeStamp && res.nonceStr && res.package && res.signType && res.paySign) {
|
||||||
|
// 调用微信支付
|
||||||
|
uni.requestPayment({
|
||||||
|
timeStamp: res.timeStamp,
|
||||||
|
nonceStr: res.nonceStr,
|
||||||
|
package: res.package,
|
||||||
|
signType: res.signType,
|
||||||
|
paySign: res.paySign,
|
||||||
|
success: (payRes) => {
|
||||||
|
const params = {
|
||||||
|
order_id: orderId,
|
||||||
|
from: 2,
|
||||||
|
group_buy_activity_id: this.group_buy_activity_id,
|
||||||
|
}
|
||||||
|
request(apiArr.queryOrder, "POST", params).then(res => {
|
||||||
|
this.verifyCode = res.verification_code
|
||||||
|
this.boxshadow1 = true
|
||||||
|
})
|
||||||
|
},
|
||||||
|
fail: (payErr) => {
|
||||||
|
uni.showToast({
|
||||||
|
title: payErr.errMsg == 'requestPayment:fail cancel' ? '已取消支付' : '支付失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
const params = {
|
||||||
|
order_ids: orderId,
|
||||||
|
}
|
||||||
|
request(apiArr.cancelPay, "POST", params).then(res => {
|
||||||
|
})
|
||||||
|
},
|
||||||
|
complete: () => {
|
||||||
|
// 支付完成后的回调,无论成功失败都会执行
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
console.error("获取支付参数失败,缺少必要参数")
|
||||||
|
uni.showToast({
|
||||||
|
title: '获取支付信息失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 复制收货地址
|
||||||
|
copyAddress() {
|
||||||
|
// 使用uni-app的复制API
|
||||||
|
uni.setClipboardData({
|
||||||
|
data: this.defAddress.address + this.defAddress.house_number,
|
||||||
|
success: () => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '复制成功',
|
||||||
|
icon: 'success'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: () => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '复制失败',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
copyZTAddress() {
|
||||||
|
// 使用uni-app的复制API
|
||||||
|
uni.setClipboardData({
|
||||||
|
data: this.defZTAddress.address,
|
||||||
|
success: () => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '复制成功',
|
||||||
|
icon: 'success'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: () => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '复制失败',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
openSave() {
|
||||||
|
this.boxshadow1 = false;
|
||||||
|
this.boxshadow2 = true;
|
||||||
|
},
|
||||||
|
changeShadow() {
|
||||||
|
this.boxshadow1 = false;
|
||||||
|
},
|
||||||
|
changeShadow2() {
|
||||||
|
this.boxshadow2 = false;
|
||||||
|
},
|
||||||
|
// 保存海报
|
||||||
|
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);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 判断当前日期是否在团购活动时间范围内
|
||||||
|
isWithinActivityTime(item) {
|
||||||
|
if (!item || !item.commodity_goods_info || !item.commodity_goods_info.group_buy_activity_info) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const now = new Date();
|
||||||
|
const startTime = new Date(item.commodity_goods_info.group_buy_activity_info?.start_time);
|
||||||
|
const endTime = new Date(item.commodity_goods_info.group_buy_activity_info?.end_time);
|
||||||
|
return now >= startTime && now <= endTime;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
@import url('./index.css');
|
||||||
|
</style>
|
||||||
@ -106,6 +106,10 @@ page {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.slide_item_active text {
|
||||||
|
color: #ff5f3c;
|
||||||
|
}
|
||||||
|
|
||||||
.Con {
|
.Con {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -158,7 +162,7 @@ page {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
margin-bottom: 150rpx;
|
padding-bottom: 260rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.CateInfo_tit {
|
.CateInfo_tit {
|
||||||
@ -311,11 +315,14 @@ page {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.CateList_Box {
|
.CateList_Box {
|
||||||
|
width: 71.5%;
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
/* position: relative; */
|
||||||
z-index: 9;
|
position: fixed;
|
||||||
|
z-index: 15;
|
||||||
padding: 20rpx 10rpx;
|
padding: 20rpx 10rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.CateList {
|
.CateList {
|
||||||
@ -333,7 +340,7 @@ page {
|
|||||||
height: 40rpx;
|
height: 40rpx;
|
||||||
background: #F6F7FB;
|
background: #F6F7FB;
|
||||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||||
padding: 5rpx 30rpx;
|
padding: 5rpx 20rpx;
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
color: #222222;
|
color: #222222;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -360,6 +367,10 @@ page {
|
|||||||
margin-left: 10rpx;
|
margin-left: 10rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.CateIte {
|
||||||
|
margin-top: 80rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.CateInfo {
|
.CateInfo {
|
||||||
margin: 0 10rpx;
|
margin: 0 10rpx;
|
||||||
padding: 10rpx 10rpx;
|
padding: 10rpx 10rpx;
|
||||||
@ -392,8 +403,8 @@ page {
|
|||||||
padding-bottom: 30rpx;
|
padding-bottom: 30rpx;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 160rpx;
|
||||||
z-index: 11;
|
z-index: 20;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header2 .slide .slide_con .slide_conBox:nth-child(5n) {
|
.header2 .slide .slide_con .slide_conBox:nth-child(5n) {
|
||||||
@ -418,7 +429,7 @@ page {
|
|||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
top: 0;
|
top: 160rpx;
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
@ -431,13 +442,14 @@ page {
|
|||||||
padding: 20rpx 12rpx;
|
padding: 20rpx 12rpx;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
top: 85rpx;
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.activeCateList .CateList_Item {
|
.activeCateList .CateList_Item {
|
||||||
margin-bottom: 16rpx;
|
margin-bottom: 16rpx;
|
||||||
margin-right: 28rpx;
|
margin-right: 20rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.activeCateList .CateList_Item:nth-child(4n) {
|
.activeCateList .CateList_Item:nth-child(4n) {
|
||||||
@ -511,7 +523,7 @@ page {
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.GGItem_Image image{
|
.GGItem_Image image {
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -566,9 +578,9 @@ page {
|
|||||||
.shop_car {
|
.shop_car {
|
||||||
width: 140rpx;
|
width: 140rpx;
|
||||||
height: 140rpx;
|
height: 140rpx;
|
||||||
position: fixed;
|
position: absolute;
|
||||||
right: 33rpx;
|
bottom: 100rpx;
|
||||||
bottom: 180rpx;
|
right: 10rpx;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -579,6 +591,26 @@ page {
|
|||||||
|
|
||||||
.u-badge {
|
.u-badge {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 70rpx;
|
||||||
|
/* 调整角标位置,使其在隐藏状态下也能看到 */
|
||||||
top: -10rpx;
|
top: -10rpx;
|
||||||
|
z-index: 11;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-top: 350rpx;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty image {
|
||||||
|
width: 366rpx;
|
||||||
|
height: 226rpx;
|
||||||
|
margin-bottom: 27rpx;
|
||||||
}
|
}
|
||||||
@ -1,101 +1,58 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<view class="container">
|
||||||
<!-- 顶部展开后的阴影 -->
|
<!-- 顶部展开后的阴影 -->
|
||||||
<div class="boxshadow" v-if="topShow"></div>
|
<view class="boxshadow" v-if="topShow"></view>
|
||||||
<div class="header" :class="topShow ? 'op0' : ''">
|
<view class="header">
|
||||||
<div
|
<view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||||||
class="searchBox"
|
<view class="searchBox_left" @click="back">
|
||||||
:style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
|
|
||||||
>
|
|
||||||
<div class="searchBox_left" @click="back">
|
|
||||||
<u-icon name="arrow-left" size="20px" color="#000"></u-icon>
|
<u-icon name="arrow-left" size="20px" color="#000"></u-icon>
|
||||||
</div>
|
</view>
|
||||||
<div class="searchBox_ipt" @click="searchPage">
|
<view class="searchBox_ipt" @click="searchPage">
|
||||||
<image
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
mode="aspectFill"></image>
|
||||||
mode="aspectFill"
|
|
||||||
></image>
|
|
||||||
<input disabled type="text" placeholder="输入商品名称" />
|
<input disabled type="text" placeholder="输入商品名称" />
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="slide">
|
<view class="slide">
|
||||||
<div class="slide_con">
|
<view class="slide_con">
|
||||||
<div
|
<view v-for="(item, index) in CateList" :key="index" class="slide_conBox" @click="changeCate(item.id)">
|
||||||
v-for="(item, index) in CateList"
|
<view class="slide_item" :class="item.id === currentCategoryId ? 'slide_item_active' : ''">
|
||||||
:key="index"
|
<image :src="picUrl + item.category_pic" mode="aspectFill"></image>
|
||||||
class="slide_conBox"
|
|
||||||
@click="changeCate(item.id)"
|
|
||||||
>
|
|
||||||
<view class="slide_item">
|
|
||||||
<image
|
|
||||||
:src="picUrl + item.category_pic"
|
|
||||||
mode="aspectFill"
|
|
||||||
></image>
|
|
||||||
<text>{{ item.category_name }}</text>
|
<text>{{ item.category_name }}</text>
|
||||||
</view>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="open" @click="topOpen" v-if="!topShow">
|
<view class="open" @click="topOpen" v-if="!topShow">
|
||||||
展 开
|
展 开
|
||||||
<image
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_openIcon.png"
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_openIcon.png"
|
mode="aspectFill"></image>
|
||||||
mode="aspectFill"
|
</view>
|
||||||
></image>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 整体展开的顶部 -->
|
<!-- 整体展开的顶部 -->
|
||||||
<div class="header header2" v-if="topShow">
|
<view class="header header2" v-if="topShow">
|
||||||
<div
|
<view class="slide">
|
||||||
class="searchBox"
|
<view class="slide_con">
|
||||||
:style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
|
<view v-for="(item, index) in CateList" :key="index" class="slide_conBox" @click="changeCate(item.id)">
|
||||||
>
|
<view class="slide_item" :class="item.id === currentCategoryId ? 'slide_item_active' : ''">
|
||||||
<div class="searchBox_left">
|
<image :src="picUrl + item.category_pic" mode="aspectFill"></image>
|
||||||
<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>
|
<text>{{ item.category_name }}</text>
|
||||||
</view>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="hides" @click="topOpen">
|
<view class="hides" @click="topOpen">
|
||||||
收起 <u-icon name="arrow-up"></u-icon>
|
收起 <u-icon name="arrow-up"></u-icon>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="Con">
|
<view class="Con">
|
||||||
<div class="Con_left">
|
<view class="Con_left">
|
||||||
<div
|
<view class="CateItem" :class="item.id === currentLeftCateId ? 'CateItem_active' : ''"
|
||||||
class="CateItem"
|
v-for="item in leftCateList" :key="item.id" @click="changeLeftCate(item.id)">
|
||||||
:class="item.id === currentLeftCateId ? 'CateItem_active' : ''"
|
|
||||||
v-for="item in leftCateList"
|
|
||||||
:key="item.id"
|
|
||||||
@click="changeLeftCate(item.id)"
|
|
||||||
>
|
|
||||||
<!-- <image v-if="false" class="hot"
|
<!-- <image v-if="false" class="hot"
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_hot.png"
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_hot.png"
|
||||||
mode="aspectFill">
|
mode="aspectFill">
|
||||||
@ -104,222 +61,157 @@
|
|||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_bao.png"
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_bao.png"
|
||||||
mode="aspectFill"></image> -->
|
mode="aspectFill"></image> -->
|
||||||
{{ item.category_name }}
|
{{ item.category_name }}
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="Con_right">
|
<view class="Con_right" v-if="tagList1.length > 0">
|
||||||
<div class="CateList_Box" :class="cateListShow ? 'bgf' : ''">
|
<view class="CateList_Box" :class="cateListShow ? 'bgf' : ''">
|
||||||
<div class="CateList" ref="cateListRef">
|
<view class="CateList" ref="cateListRef">
|
||||||
<div
|
<view class="CateList_Item" v-for="(item, index) in tagList" :key="item.id"
|
||||||
class="CateList_Item"
|
:class="index == rightTopActive ? 'CateList_Item_active' : ''" @click="checkItem(index)">
|
||||||
v-for="(item, index) in tagList"
|
|
||||||
:key="item.id"
|
|
||||||
:class="index == rightTopActive ? 'CateList_Item_active' : ''"
|
|
||||||
@click="checkItem(index)"
|
|
||||||
>
|
|
||||||
{{ item.tag_name }}
|
{{ item.tag_name }}
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="more" @click="changeCateListShow">
|
<view class="more" @click="changeCateListShow">
|
||||||
<u-icon v-if="!cateListShow" name="arrow-down"></u-icon>
|
<u-icon v-if="!cateListShow" name="arrow-down"></u-icon>
|
||||||
<u-icon v-if="cateListShow" name="arrow-up"></u-icon>
|
<u-icon v-if="cateListShow" name="arrow-up"></u-icon>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
<!-- 右下展开的内容 -->
|
<!-- 右下展开的内容 -->
|
||||||
<div class="activeCateList" v-if="cateListShow">
|
<view class="activeCateList" v-if="cateListShow">
|
||||||
<div
|
<view class="CateList_Item" v-for="(item, index) in tagList" :key="index"
|
||||||
class="CateList_Item"
|
:class="index == rightTopActive ? 'CateList_Item_active' : ''" @click="checkItem(index)">
|
||||||
v-for="(item, index) in tagList"
|
|
||||||
:key="index"
|
|
||||||
:class="index == rightTopActive ? 'CateList_Item_active' : ''"
|
|
||||||
@click="checkItem(index)"
|
|
||||||
>
|
|
||||||
{{ item.tag_name }}
|
{{ item.tag_name }}
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
<!-- 右下阴影 -->
|
<!-- 右下阴影 -->
|
||||||
<div class="boxshadow2" v-if="cateListShow"></div>
|
<view class="boxshadow2" v-if="cateListShow" @click="changeCateListShow"></view>
|
||||||
|
|
||||||
<div class="CateInfo" v-for="item in tagList" :key="item.id">
|
<view class="CateIte">
|
||||||
<div class="CateInfo_tit">
|
<view class="CateInfo"
|
||||||
|
v-for="item in (selectedTagId === 'all' ? tagList.slice(1) : [tagList.find(t => t.id === selectedTagId) || {}])"
|
||||||
|
:key="item.id">
|
||||||
|
<view class="CateInfo_tit">
|
||||||
{{ item.tag_name }}
|
{{ item.tag_name }}
|
||||||
</div>
|
</view>
|
||||||
<div
|
<view class="CateInfo_Item" v-for="items in item.commodity_info_list" :key="items.id">
|
||||||
class="CateInfo_Item"
|
<view class="CateInfo_Item_Box">
|
||||||
v-for="items in item.commodity_info_list"
|
<view class="CateInfo_Item_left" @click="goods(items)">
|
||||||
:key="items.id"
|
<view class="tag tag-img" v-if="
|
||||||
>
|
|
||||||
<div class="CateInfo_Item_Box">
|
|
||||||
<div class="CateInfo_Item_left" @click="goods(items)">
|
|
||||||
<view
|
|
||||||
class="tag tag-img"
|
|
||||||
v-if="
|
|
||||||
!items.commodity_goods_info_list[1] &&
|
!items.commodity_goods_info_list[1] &&
|
||||||
items.commodity_goods_info_list[0].is_same_day
|
items.commodity_goods_info_list[0].is_same_day
|
||||||
"
|
">当日达</view>
|
||||||
>当日达</view
|
<image :src="picUrl + items.commodity_pic" mode="aspectFill"></image>
|
||||||
>
|
</view>
|
||||||
<image
|
<view class="CateInfo_Item_right" :class="GGshow ? 'noneBor' : ''">
|
||||||
:src="picUrl + items.commodity_pic"
|
<view class="CateInfo_Item_right_Tit" @click="goods(items)">
|
||||||
mode="aspectFill"
|
<view class="tag tag-text" v-if="
|
||||||
></image>
|
|
||||||
</div>
|
|
||||||
<div class="CateInfo_Item_right" :class="GGshow ? 'noneBor' : ''">
|
|
||||||
<div class="CateInfo_Item_right_Tit" @click="goods(items)">
|
|
||||||
<view
|
|
||||||
class="tag tag-text"
|
|
||||||
v-if="
|
|
||||||
!items.commodity_goods_info_list[1] &&
|
!items.commodity_goods_info_list[1] &&
|
||||||
items.commodity_goods_info_list[0].is_same_day
|
items.commodity_goods_info_list[0].is_same_day
|
||||||
"
|
">当日达</view>
|
||||||
>当日达</view
|
|
||||||
>
|
|
||||||
{{ items.commodity_name }}
|
{{ items.commodity_name }}
|
||||||
</div>
|
</view>
|
||||||
<div class="CateInfo_Item_right_subtit" @click="goods(items)">
|
<view class="CateInfo_Item_right_subtit" @click="goods(items)">
|
||||||
{{ items.commodity_intro }}
|
{{ items.commodity_intro }}
|
||||||
</div>
|
</view>
|
||||||
<div class="CateInfo_Item_Money">
|
<view class="CateInfo_Item_Money">
|
||||||
<div class="CateInfo_Item_Money_left">
|
<view class="CateInfo_Item_Money_left">
|
||||||
{{ getPriceRange(items.commodity_goods_info_list) }}
|
{{ getPriceRange(items.commodity_goods_info_list) }}
|
||||||
</div>
|
</view>
|
||||||
<div
|
<view class="CateInfo_Item_Money_right" v-if="!(items.commodity_goods_info_list.length > 1)">
|
||||||
class="CateInfo_Item_Money_right"
|
<u-number-box :min="0" v-model="items.commodity_goods_info_list[0].quantity"
|
||||||
v-if="!(items.commodity_goods_info_list.length > 1)"
|
@change="(value) => handleQuantityChange(value, items)">
|
||||||
>
|
|
||||||
<u-number-box
|
|
||||||
:min="0"
|
|
||||||
v-model="items.commodity_goods_info_list[0].quantity"
|
|
||||||
@change="(value) => handleQuantityChange(value, items)"
|
|
||||||
>
|
|
||||||
<view slot="minus" class="minus">
|
<view slot="minus" class="minus">
|
||||||
<u-icon name="minus" size="20"></u-icon>
|
<u-icon name="minus" size="20"></u-icon>
|
||||||
</view>
|
</view>
|
||||||
<text
|
<text slot="input" style="width: 50px; text-align: center" class="input">{{
|
||||||
slot="input"
|
|
||||||
style="width: 50px; text-align: center"
|
|
||||||
class="input"
|
|
||||||
>{{
|
|
||||||
items.commodity_goods_info_list[0].quantity
|
items.commodity_goods_info_list[0].quantity
|
||||||
? items.commodity_goods_info_list[0].quantity
|
? items.commodity_goods_info_list[0].quantity
|
||||||
: 0
|
: 0
|
||||||
}}</text
|
}}</text>
|
||||||
>
|
|
||||||
<view slot="plus" class="plus">
|
<view slot="plus" class="plus">
|
||||||
<u-icon name="plus" color="#FFFFFF" size="20"></u-icon>
|
<u-icon name="plus" color="#FFFFFF" size="20"></u-icon>
|
||||||
</view>
|
</view>
|
||||||
</u-number-box>
|
</u-number-box>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div
|
<view class="gg" @click="chooseGG(item,items)" v-if="
|
||||||
class="gg"
|
|
||||||
@click="chooseGG(items)"
|
|
||||||
v-if="
|
|
||||||
items.commodity_goods_info_list.length > 1 && !items.isShow
|
items.commodity_goods_info_list.length > 1 && !items.isShow
|
||||||
"
|
">
|
||||||
>
|
|
||||||
选择规格
|
选择规格
|
||||||
<u-icon
|
<u-icon name="arrow-down" size="26rpx" color="#FF370B"></u-icon>
|
||||||
name="arrow-down"
|
</view>
|
||||||
size="26rpx"
|
|
||||||
color="#FF370B"
|
|
||||||
></u-icon>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
<view class="gg" @click="chooseGG(item,items)" v-if="
|
||||||
class="gg"
|
|
||||||
@click="chooseGG(items)"
|
|
||||||
v-if="
|
|
||||||
items.commodity_goods_info_list.length > 1 && items.isShow
|
items.commodity_goods_info_list.length > 1 && items.isShow
|
||||||
"
|
">
|
||||||
>
|
|
||||||
收起
|
收起
|
||||||
<u-icon name="arrow-up" size="26rpx" color="#FF370B"></u-icon>
|
<u-icon name="arrow-up" size="26rpx" color="#FF370B"></u-icon>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="GGList" v-if="items.isShow">
|
<view class="GGList" v-if="items.isShow">
|
||||||
<div
|
<view class="GGItem" v-for="ite in items.commodity_goods_info_list" :key="ite.id" @click="goods(ite,items)">
|
||||||
class="GGItem"
|
<view class="GGItem_Image">
|
||||||
v-for="ite in items.commodity_goods_info_list"
|
|
||||||
:key="ite.id"
|
|
||||||
@click="goods(items)"
|
|
||||||
>
|
|
||||||
<div class="GGItem_Image">
|
|
||||||
<view class="tag tag-img" v-if="ite.is_same_day">当日达</view>
|
<view class="tag tag-img" v-if="ite.is_same_day">当日达</view>
|
||||||
<image
|
<image :src="picUrl + ite.commodity_pic" mode="aspectFill"></image>
|
||||||
:src="picUrl + ite.commodity_pic"
|
</view>
|
||||||
mode="aspectFill"
|
<view class="GGItem_Con">
|
||||||
></image>
|
<view class="GGItem_Con_Tit">
|
||||||
</div>
|
<view class="tag tag-text" v-if="ite.is_same_day">当日达</view>
|
||||||
<div class="GGItem_Con">
|
|
||||||
<div class="GGItem_Con_Tit">
|
|
||||||
<view class="tag tag-text" v-if="ite.is_same_day"
|
|
||||||
>当日达</view
|
|
||||||
>
|
|
||||||
{{ ite.goods_name }}
|
{{ ite.goods_name }}
|
||||||
</div>
|
</view>
|
||||||
<div class="GGItem_Con_Msg">
|
<view class="GGItem_Con_Msg">
|
||||||
<div class="GGItem_Con_Msg_left">
|
<view class="GGItem_Con_Msg_left">
|
||||||
<span>¥</span>{{ ite.sales_price }}
|
<span>¥</span>{{ ite.sales_price }}
|
||||||
</div>
|
</view>
|
||||||
<div class="GGItem_Con_Msg_right">
|
<view class="GGItem_Con_Msg_right">
|
||||||
<u-number-box
|
<u-number-box v-model="ite.quantity" :min="0"
|
||||||
v-model="ite.quantity"
|
@change="(value) => handleQuantityChange(value, ite)">
|
||||||
:min="0"
|
|
||||||
@change="(value) => handleQuantityChange(value, ite)"
|
|
||||||
>
|
|
||||||
<view slot="minus" class="minus">
|
<view slot="minus" class="minus">
|
||||||
<u-icon name="minus" size="20"></u-icon>
|
<u-icon name="minus" size="20"></u-icon>
|
||||||
</view>
|
</view>
|
||||||
<text
|
<text slot="input" style="width: 50px; text-align: center" class="input">{{ ite.quantity ?
|
||||||
slot="input"
|
ite.quantity : 0 }}</text>
|
||||||
style="width: 50px; text-align: center"
|
|
||||||
class="input"
|
|
||||||
>{{ ite.quantity ? ite.quantity : 0 }}</text
|
|
||||||
>
|
|
||||||
<view slot="plus" class="plus">
|
<view slot="plus" class="plus">
|
||||||
<u-icon
|
<u-icon name="plus" color="#FFFFFF" size="20"></u-icon>
|
||||||
name="plus"
|
|
||||||
color="#FFFFFF"
|
|
||||||
size="20"
|
|
||||||
></u-icon>
|
|
||||||
</view>
|
</view>
|
||||||
</u-number-box>
|
</u-number-box>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<!-- 按钮 -->
|
<!-- 按钮 -->
|
||||||
<!-- <div class="btn">
|
<!-- <view class="btn">
|
||||||
查看全部商品
|
查看全部商品
|
||||||
<div class="cir">
|
<view class="cir">
|
||||||
<u-icon name="arrow-right" color="#fff" size="12px"></u-icon>
|
<u-icon name="arrow-right" color="#fff" size="12px"></u-icon>
|
||||||
</div>
|
</view>
|
||||||
</div> -->
|
</view> -->
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
<view class="Con_right" v-else>
|
||||||
|
<view class="empty">
|
||||||
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_nearbyList_empty.png"
|
||||||
|
mode="aspectFill"></image>
|
||||||
|
暂无数据
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<!-- <nav-footer :current="3" /> -->
|
<!-- <nav-footer :current="3" /> -->
|
||||||
|
|
||||||
<div class="shop_car" @click="shopCar">
|
<view class="shop_car" @click="shopCar">
|
||||||
<u-badge
|
<u-badge numberType="limit" type="error" max="99" :value="carNum"></u-badge>
|
||||||
numberType="limit"
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_num.png"></image>
|
||||||
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> -->
|
<!-- <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_empty.png"></image> -->
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -335,6 +227,7 @@ export default {
|
|||||||
search: "",
|
search: "",
|
||||||
value: "1",
|
value: "1",
|
||||||
cateListShow: false,
|
cateListShow: false,
|
||||||
|
conRightElement: null,
|
||||||
iconList: [
|
iconList: [
|
||||||
{
|
{
|
||||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon1.png",
|
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon1.png",
|
||||||
@ -382,8 +275,11 @@ export default {
|
|||||||
rightTopActive: 0,
|
rightTopActive: 0,
|
||||||
currentLeftCateId: null,
|
currentLeftCateId: null,
|
||||||
topShow: false,
|
topShow: false,
|
||||||
|
currentCategoryId: null,
|
||||||
|
|
||||||
GGshow: false,
|
GGshow: false,
|
||||||
|
originalTagList: [], // 存储原始的tagList数据
|
||||||
|
selectedTagId: null, // 当前选中的标签ID
|
||||||
CateList: [], //分类列表
|
CateList: [], //分类列表
|
||||||
currentFirstId: "",
|
currentFirstId: "",
|
||||||
leftCateList: [], //底部左侧分类
|
leftCateList: [], //底部左侧分类
|
||||||
@ -392,6 +288,7 @@ export default {
|
|||||||
currentThirdId: "",
|
currentThirdId: "",
|
||||||
|
|
||||||
tagList: [],
|
tagList: [],
|
||||||
|
tagList1: [],
|
||||||
carNum: "",
|
carNum: "",
|
||||||
|
|
||||||
goodsDetail: [],
|
goodsDetail: [],
|
||||||
@ -405,14 +302,25 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
changeCate(id) {
|
changeCate(id) {
|
||||||
|
this.checkItem(0)
|
||||||
|
// 更新当前选中的顶级分类ID
|
||||||
|
this.currentCategoryId = id;
|
||||||
// 根据id查找对应的分类
|
// 根据id查找对应的分类
|
||||||
const category = this.CateList.find((item) => item.id === id);
|
const category = this.CateList.find((item) => item.id === id);
|
||||||
if (category) {
|
if (category) {
|
||||||
// 将leftCateList设置为该分类的二级分类,若为null则设为空数组
|
// 将leftCateList设置为该分类的二级分类,若为null则设为空数组
|
||||||
this.leftCateList = category.level_two_category || [];
|
this.leftCateList = category.level_two_category || [];
|
||||||
this.secondId = this.leftCateList[0]?.id;
|
this.tagList1 = category.level_three_category || [];
|
||||||
|
if (this.leftCateList.length > 0) {
|
||||||
|
this.currentLeftCateId = this.leftCateList[0].id;
|
||||||
|
this.secondId = this.leftCateList[0].id;
|
||||||
|
} else {
|
||||||
|
this.currentLeftCateId = null;
|
||||||
|
this.secondId = null;
|
||||||
|
}
|
||||||
this.getGoodsList();
|
this.getGoodsList();
|
||||||
}
|
}
|
||||||
|
this.topShow = false;
|
||||||
},
|
},
|
||||||
//顶部分类点击
|
//顶部分类点击
|
||||||
changeCateListShow() {
|
changeCateListShow() {
|
||||||
@ -420,23 +328,42 @@ export default {
|
|||||||
},
|
},
|
||||||
//选择右下角分类
|
//选择右下角分类
|
||||||
checkItem(index) {
|
checkItem(index) {
|
||||||
|
this.cateListShow = false
|
||||||
this.rightTopActive = index;
|
this.rightTopActive = index;
|
||||||
|
// 获取选中的标签ID
|
||||||
|
this.selectedTagId = this.tagList[index]?.id;
|
||||||
},
|
},
|
||||||
//右下角点击更多
|
//右下角点击更多
|
||||||
topOpen() {
|
topOpen() {
|
||||||
this.topShow = !this.topShow;
|
this.topShow = !this.topShow;
|
||||||
},
|
},
|
||||||
// 选择商品规格
|
// 选择商品规格
|
||||||
chooseGG(e) {
|
chooseGG(item,targetItems) {
|
||||||
e.isShow = !e.isShow;
|
// 根据两个参数的id判断点击的数据
|
||||||
|
if (item && targetItems && item.id) {
|
||||||
|
for (let i = 1; i < this.tagList.length; i++) {
|
||||||
|
const tagItem = this.tagList[i];
|
||||||
|
// 先根据item.id找到对应的tagItem
|
||||||
|
if (tagItem.id === item.id) {
|
||||||
|
const infoIndex = tagItem.commodity_info_list.findIndex(infoItem => infoItem.id === targetItems.id);
|
||||||
|
if (infoIndex > -1) {
|
||||||
|
// 直接修改数据源中的对象,确保响应式
|
||||||
|
const currentItem = tagItem.commodity_info_list[infoIndex];
|
||||||
|
this.$set(currentItem, 'isShow', !currentItem.isShow);
|
||||||
|
console.log("修改后数据源中的isShow:", currentItem.isShow);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
//搜索页
|
//搜索页
|
||||||
searchPage() {
|
searchPage() {
|
||||||
NavgateTo("../search/index");
|
NavgateTo("../search/index");
|
||||||
},
|
},
|
||||||
//商品详情页
|
//商品详情页
|
||||||
goods(e) {
|
goods(ite,items) {
|
||||||
NavgateTo(`../goods/index?item=${JSON.stringify(e)}`);
|
NavgateTo(`../goods/index?item=${JSON.stringify(ite)}`);
|
||||||
},
|
},
|
||||||
|
|
||||||
// 购物车
|
// 购物车
|
||||||
@ -449,6 +376,8 @@ export default {
|
|||||||
console.log(res);
|
console.log(res);
|
||||||
this.CateList = res.commodity_category_list;
|
this.CateList = res.commodity_category_list;
|
||||||
this.firstId = res.commodity_category_list[0].id;
|
this.firstId = res.commodity_category_list[0].id;
|
||||||
|
// 设置默认选中第一个分类
|
||||||
|
this.currentCategoryId = this.firstId;
|
||||||
this.leftCateList =
|
this.leftCateList =
|
||||||
res.commodity_category_list[0].level_two_category || [];
|
res.commodity_category_list[0].level_two_category || [];
|
||||||
if (this.leftCateList.length > 0) {
|
if (this.leftCateList.length > 0) {
|
||||||
@ -465,31 +394,39 @@ export default {
|
|||||||
getGoodsList() {
|
getGoodsList() {
|
||||||
if (!this.secondId) {
|
if (!this.secondId) {
|
||||||
this.tagList = [];
|
this.tagList = [];
|
||||||
|
this.originalTagList = [];
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
request(apiArr.getGoodsList, "POST", {
|
request(apiArr.getGoodsList, "POST", {
|
||||||
user_id: uni.getStorageSync("userId"),
|
user_id: uni.getStorageSync("userId"),
|
||||||
id: this.secondId,
|
id: this.secondId,
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
res.commodity_list.forEach((item) => {
|
// 深拷贝接口数据,避免引用问题
|
||||||
item.commodity_info_list.forEach((item) => {
|
const commodityList = JSON.parse(JSON.stringify(res.commodity_list));
|
||||||
item.commodity_goods_info_list.forEach((param) => {
|
commodityList.forEach((tagItem) => { // 重命名外层变量,避免嵌套冲突
|
||||||
|
tagItem.commodity_info_list.forEach((infoItem) => { // 内层变量重命名
|
||||||
|
// 初始化isShow为响应式属性
|
||||||
|
this.$set(infoItem, 'isShow', false);
|
||||||
|
infoItem.commodity_goods_info_list.forEach((param) => {
|
||||||
this.goodsDetail.forEach((goods) => {
|
this.goodsDetail.forEach((goods) => {
|
||||||
if (goods.goods_id === param.id) {
|
if (goods.goods_id === param.id) {
|
||||||
param.quantity = goods.count;
|
this.$set(param, 'quantity', goods.count); // 同步数量也要用$set
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
item.isShow = false;
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
this.tagList = res.commodity_list;
|
this.originalTagList = commodityList;
|
||||||
|
this.tagList1 = commodityList;
|
||||||
|
// 重新构建tagList,确保使用拷贝后的响应式数据
|
||||||
|
this.tagList = [{ id: 'all', tag_name: '全部' }, ...commodityList];
|
||||||
|
this.rightTopActive = 0;
|
||||||
|
this.selectedTagId = 'all';
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
getShopCarList() {
|
getShopCarList() {
|
||||||
request(apiArr.getCar, "POST").then((res) => {
|
request(apiArr.getCar, "POST").then((res) => {
|
||||||
console.log(res);
|
|
||||||
this.carNum = res.total;
|
this.carNum = res.total;
|
||||||
// 合并当日达和普通商品数据
|
// 合并当日达和普通商品数据
|
||||||
this.goodsDetail = [].concat(res.same_day_cart_list, res.normal_cart_list)
|
this.goodsDetail = [].concat(res.same_day_cart_list, res.normal_cart_list)
|
||||||
@ -504,32 +441,88 @@ export default {
|
|||||||
},
|
},
|
||||||
//商品数量变化
|
//商品数量变化
|
||||||
handleQuantityChange(val, item) {
|
handleQuantityChange(val, item) {
|
||||||
|
const quantity = typeof val === 'object' && val !== null && 'value' in val ? val.value : val;
|
||||||
|
|
||||||
|
// 检查库存数量
|
||||||
|
let currentQuantity = 0;
|
||||||
|
let stockQuantity = 0;
|
||||||
|
let goodsToUpdate = null;
|
||||||
|
|
||||||
|
// 对于有规格的主商品(绑定到items.commodity_goods_info_list[0].quantity)
|
||||||
if (
|
if (
|
||||||
item.commodity_goods_info_list &&
|
item.commodity_goods_info_list &&
|
||||||
item.commodity_goods_info_list.length
|
item.commodity_goods_info_list.length
|
||||||
) {
|
) {
|
||||||
this.goodsId = item.commodity_goods_info_list[0].id;
|
this.goodsId = item.commodity_goods_info_list[0].id;
|
||||||
} else {
|
currentQuantity = item.commodity_goods_info_list[0].quantity || 0;
|
||||||
this.goodsId = item.id;
|
stockQuantity = item.commodity_goods_info_list[0].stock_quantity || 0;
|
||||||
|
goodsToUpdate = item.commodity_goods_info_list[0];
|
||||||
}
|
}
|
||||||
|
// 对于规格列表中的商品(绑定到ite.quantity)
|
||||||
|
else {
|
||||||
|
this.goodsId = item.id;
|
||||||
|
currentQuantity = item.quantity || 0;
|
||||||
|
stockQuantity = item.stock_quantity || 0;
|
||||||
|
goodsToUpdate = item;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断是否增加数量且库存不足
|
||||||
|
if (quantity > currentQuantity && currentQuantity >= stockQuantity) {
|
||||||
|
uni.showToast({
|
||||||
|
title: "库存不足",
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用$set确保响应式更新
|
||||||
|
this.$set(goodsToUpdate, 'quantity', quantity);
|
||||||
|
|
||||||
const params = {
|
const params = {
|
||||||
user_id: uni.getStorageSync("userId"),
|
user_id: uni.getStorageSync("userId"),
|
||||||
goods_id_and_count: [
|
goods_id_and_count: [
|
||||||
{
|
{
|
||||||
goods_id: this.goodsId,
|
goods_id: this.goodsId,
|
||||||
count: val.value,
|
count: quantity,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 发送请求更新后端数据
|
||||||
request(apiArr.updateCar, "POST", params).then((res) => {
|
request(apiArr.updateCar, "POST", params).then((res) => {
|
||||||
console.log(res);
|
console.log(res);
|
||||||
|
// 先更新购物车数据
|
||||||
this.getShopCarList();
|
this.getShopCarList();
|
||||||
|
|
||||||
|
// 延迟一小段时间,确保goodsDetail已经更新
|
||||||
|
setTimeout(() => {
|
||||||
|
// 重新同步商品列表中的数量
|
||||||
|
this.syncGoodsQuantities();
|
||||||
|
}, 100);
|
||||||
|
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: "操作成功!",
|
title: "操作成功!",
|
||||||
success() {},
|
success() { },
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 同步商品列表中的数量
|
||||||
|
syncGoodsQuantities() {
|
||||||
|
// 遍历所有商品,同步数量
|
||||||
|
this.tagList.forEach((tagItem) => {
|
||||||
|
if (tagItem.commodity_info_list) {
|
||||||
|
tagItem.commodity_info_list.forEach((infoItem) => {
|
||||||
|
infoItem.commodity_goods_info_list.forEach((param) => {
|
||||||
|
const goods = this.goodsDetail.find(g => g.goods_id === param.id);
|
||||||
|
if (goods) {
|
||||||
|
this.$set(param, 'quantity', goods.count);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
getPriceRange(goodsList) {
|
getPriceRange(goodsList) {
|
||||||
if (!goodsList || goodsList.length === 0) return '¥0';
|
if (!goodsList || goodsList.length === 0) return '¥0';
|
||||||
const prices = goodsList.map(item => Number(item.sales_price));
|
const prices = goodsList.map(item => Number(item.sales_price));
|
||||||
@ -549,6 +542,13 @@ export default {
|
|||||||
this.getShopCarList();
|
this.getShopCarList();
|
||||||
this.getGoodsList();
|
this.getGoodsList();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
onHide() {
|
||||||
|
// 移除滚动事件监听
|
||||||
|
if (this.conRightElement) {
|
||||||
|
this.conRightElement = null;
|
||||||
|
}
|
||||||
|
},
|
||||||
onReachBottom() {
|
onReachBottom() {
|
||||||
if (this.flag) {
|
if (this.flag) {
|
||||||
}
|
}
|
||||||
|
|||||||
@ -69,6 +69,12 @@ image {
|
|||||||
margin-top: 48rpx;
|
margin-top: 48rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hisTop{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
.hisTit {
|
.hisTit {
|
||||||
font-size: 33rpx;
|
font-size: 33rpx;
|
||||||
color: #222222;
|
color: #222222;
|
||||||
@ -172,10 +178,40 @@ image {
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
background-color: #ff7d00;
|
||||||
|
color: white;
|
||||||
|
font-size: 22rpx;
|
||||||
|
padding: 5rpx 10rpx;
|
||||||
|
border-radius: 20rpx 0 20rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-img {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-text {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-name {
|
||||||
|
background-color: #ff7d00;
|
||||||
|
color: white;
|
||||||
|
font-size: 22rpx;
|
||||||
|
padding: 5rpx 10rpx;
|
||||||
|
border-radius: 20rpx 0 20rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.searchItem_right_tit {
|
.searchItem_right_tit {
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchItem_right_subTit {
|
.searchItem_right_subTit {
|
||||||
@ -184,6 +220,171 @@ image {
|
|||||||
margin-top: 10rpx;
|
margin-top: 10rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 商品信息样式 */
|
||||||
|
.CateInfo_Item_Box {
|
||||||
|
display: flex;
|
||||||
|
padding: 20rpx 40rpx;
|
||||||
|
border-bottom: 1rpx solid #EBEBEB;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CateInfo_Item_left {
|
||||||
|
width: 140rpx;
|
||||||
|
min-width: 140rpx;
|
||||||
|
height: 140rpx;
|
||||||
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 15rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CateInfo_Item_left image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CateInfo_Item_right {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CateInfo_Item_right_Tit {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #000000;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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-radius: 50%;
|
||||||
|
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;
|
||||||
|
position: absolute;
|
||||||
|
right: 100rpx;
|
||||||
|
bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GGList {
|
||||||
|
width: 550rpx;
|
||||||
|
background: rgba(255, 239, 239, 0.5);
|
||||||
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||||
|
padding: 25rpx 16rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-left: 26rpx;
|
||||||
|
position: relative;
|
||||||
|
left: 22%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noneBor {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GGItem {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GGItem_Image {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
margin: 0 20rpx 20rpx 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GGItem_Image image {
|
||||||
|
border-radius: 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;
|
||||||
|
}
|
||||||
|
|
||||||
.searchItem_right_Money {
|
.searchItem_right_Money {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -226,3 +427,23 @@ image {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* 测试用 */
|
||||||
|
.search-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
/* border: 1px solid #ccc; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-results {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-item {
|
||||||
|
padding: 10px;
|
||||||
|
/* border-bottom: 1px solid #ddd; */
|
||||||
|
}
|
||||||
|
/* 测试用 */
|
||||||
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