index.vue 37 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232
  1. <template>
  2. <view class="page">
  3. <!-- <view class="flex-row periodDate">-->
  4. <!-- <view class="flex-row">-->
  5. <!-- <text>服务日期:</text>-->
  6. <!-- </view>-->
  7. <!-- <picker @change="bindPickerChange" mode='selector' range-key="label" :value="periodDateIndex" :range="periodDateList">-->
  8. <!-- <view class="flex-row justify-between" :style="{width:'550rpx'}">-->
  9. <!-- <text>{{periodDate.label || '请选择服务日期' }}</text>-->
  10. <!-- <u-icon name="arrow-right" color="#666" size="18"></u-icon>-->
  11. <!-- </view>-->
  12. <!-- </picker>-->
  13. <!-- </view>-->
  14. <view class="dateTabs">
  15. <u-tabs :list="periodDateList" lineColor="#FFE05C" lineWidth="40" lineHeight="4" :activeStyle="{
  16. color: '#FFE05C',
  17. fontWeight: 'bold',
  18. transform: 'scale(1.05)'
  19. }" @click="clickPeriodDateList"></u-tabs>
  20. </view>
  21. <view class="store-wrap">
  22. <view class="store-info">
  23. <view class="logo">
  24. <image src="../../static/index/u55.png" mode=""></image>
  25. </view>
  26. <view @click="gotoStoreChoose()" class="store-content">
  27. <view class="h-row">
  28. <view class="store-desc">
  29. <view class="store-name">
  30. <view class="">{{ storeInfo.storeName }}</view>
  31. </view>
  32. </view>
  33. <view class="arrow-right">
  34. <view class="change-store">更换门店</view>
  35. <u-icon name="arrow-right" color="#333" size="16"></u-icon>
  36. </view>
  37. </view>
  38. <view class="h-row">
  39. <text class="address">地址:{{ storeInfo.address }}</text>
  40. <text class="address1">{{storeInfo.distanceDesc}}</text>
  41. </view>
  42. </view>
  43. </view>
  44. </view>
  45. <view class="flex-col group">
  46. <view class="serob"><text>服务对象</text></view>
  47. <u-grid :border="false" col="4">
  48. <u-grid-item v-for="(item,index) in serviceObjectList" :key="index">
  49. <view class="serobItem flex-col" >
  50. <view class="serobImgView" @click="selectServiceObject(item)">
  51. <image class="serobImg" mode="aspectFill" :src="item.facePhotoUrl || '/static/me/ud4.png'"></image>
  52. </view>
  53. <text class="serobName">{{item.nickName || '未填写'}}</text>
  54. <view class="serobV" v-if="item.select === true">
  55. <image class="serobVicon" src="/static/order/ud20.png"></image>
  56. </view>
  57. </view>
  58. </u-grid-item>
  59. </u-grid>
  60. <!-- <view class="serobReminder">-->
  61. <!-- <text>请注意,一人一号</text>-->
  62. <!-- </view>-->
  63. </view>
  64. <view class="flex-col group " v-for="(item, index) in orderParam.childService">
  65. <view class="flex-row " v-if="serviceObjectList.length>1">
  66. <image class="selectSerobImg" mode="aspectFill" :src="item.facePhotoUrl || '/static/me/ud4.png'"></image>
  67. <text class="selectSerobName">{{item.nickName || '未填写'}}</text>
  68. </view>
  69. <view class="serob">
  70. <text>服务人员以及预约费用</text>
  71. </view>
  72. <view>
  73. <u-grid col="4">
  74. <u-grid-item v-for="(item1,index1) in item.serviceTeacherList" :key="index1">
  75. <view class="serobItem flex-col" @click="selectServiceTeach(item.serviceTeacherList,index,index1)">
  76. <view class="serobImgView">
  77. <image class="serobImg" mode="aspectFill" :src="item1.facePhotoUrl || '/static/me/ud4.png'"></image>
  78. </view>
  79. <text class="serobName ">{{item1.personName || '未填写'}}</text>
  80. <view class="flex-row justify-center ">
  81. <!-- <u-icon name="rmb-circle" size="14"></u-icon>-->
  82. <text class="teachPrice">{{item1.fee}}</text>
  83. </view>
  84. <view class="serobV " v-if="item1.select">
  85. <image class="serobVicon" src="/static/order/ud20.png"></image>
  86. </view>
  87. </view>
  88. </u-grid-item>
  89. </u-grid>
  90. </view>
  91. <view class="serob" :style="{'marginTop':'32rpx'}">
  92. <text>服务时段</text>
  93. </view>
  94. <view v-if="!item.serviceStartTime" class="noTime flex-row justify-center">
  95. <text>暂无可用的服务时段</text>
  96. </view>
  97. <view v-else>
  98. <u-grid :border="false" col="5">
  99. <u-grid-item v-if="item2.total > 0" v-for="(item2,index2) in item.serviceTimeList" :key="index2">
  100. <view class="timeItemView">
  101. <view class="flex-col justify-center timeItem " :class="{selectBack: item2.select}" @click="selectServiceTime(item.serviceTimeList,index,index2)">
  102. <view class="flex-row justify-center">
  103. <text class="time">{{item2.label}}</text>
  104. </view>
  105. <!-- <view class="flex-row justify-center">-->
  106. <!-- <text class="price">¥{{item2.price}}</text>-->
  107. <!-- </view>-->
  108. </view>
  109. </view>
  110. </u-grid-item>
  111. </u-grid>
  112. </view>
  113. </view>
  114. <view class="flex-col group ">
  115. <view class="groupItemKey">
  116. <text>取号规则</text>
  117. </view>
  118. <view class="textareaView ">
  119. <view v-for=" (item,index) in takeNumberRules " class="serobReminder">
  120. <text>{{index+1}}.{{item.dictValue}}。</text>
  121. </view>
  122. <!-- <textarea v-model="orderParam.remark" placeholder-style="color:#999999;fontSize:28rpx"-->
  123. <!-- placeholder="如有其它特殊需求,请在此输入您的需求" />-->
  124. <!-- <view class="serobReminder">-->
  125. <!-- <text>1.预约需要一人一号。</text>-->
  126. <!-- </view>-->
  127. <!-- <view class="serobReminder">-->
  128. <!-- <text>2.目前支付费用为时段预约占位费。</text>-->
  129. <!-- </view>-->
  130. <!-- <view class="serobReminder">-->
  131. <!-- <text>3.服务费用到店享受相应服务以后在另行收取。</text>-->
  132. <!-- </view>-->
  133. <!-- <view class="serobReminder">-->
  134. <!-- <text>4.到门店先签到,过时没有签到占位时段失效。</text>-->
  135. <!-- </view>-->
  136. </view>
  137. </view>
  138. <view v-if="recommendActivity" class="flex-row justify-center" style="background: #ffffff;margin-top: 20rpx;padding: 10rpx 32rpx">
  139. <image style="width: 686rpx" :src="activityImg" mode="widthFix" @click="goDetail(recommendActivity)"></image>
  140. </view>
  141. <view :style="{'height':'236rpx'}"></view>
  142. <view class="flex-col group2 ">
  143. <!-- <view v-if="recommendActivity" class="btnTitle1 flex-row justify-between">-->
  144. <!-- <view>-->
  145. <!-- <text>推荐活动:{{recommendActivity.title}}</text>-->
  146. <!-- <text style="margin-left: 10rpx;color: #999999" >({{recommendActivity.description}})</text>-->
  147. <!-- </view>-->
  148. <!-- <view class="btnRight1" @click="goDetail(recommendActivity)">购买({{recommendActivity.salePrice}})</view>-->
  149. <!-- </view>-->
  150. <view class="btnTitle flex-row">
  151. <view class="agree-checkbox" :class="{ checked: selectIcon }" @click="selectChange">
  152. <text v-if="selectIcon" class="check-icon">✓</text>
  153. </view>
  154. <text class="agree-text">请阅读并同意</text>
  155. <text class="agree-link" @click="goTermsOfService">《预约需知》</text>
  156. </view>
  157. <view class="btn flex-row justify-between">
  158. <view>
  159. <text class="title">待支付</text>
  160. <text class="num">{{price}}</text>
  161. </view>
  162. <view class="btnRight" @click="openSetting">
  163. <text>提交</text>
  164. </view>
  165. </view>
  166. </view>
  167. <myPay ref="myPay" :selectBlPay="userInfo.balance *1 >= price *1" :balance="userInfo.balance" :totalAmount="price" :storeId="store.storeId"
  168. :orderNo="subOrderNo" @payResult="payResult" @improperClose="improperClose"></myPay>
  169. <uni-popup ref="reservationQueuePopup">
  170. <uni-popup-dialog :type="msgType" cancelText="不再提示" confirmText="已知晓" title="提示" :content="configContent" @confirm="dialogConfirm"
  171. @close="dialogClose"></uni-popup-dialog>
  172. </uni-popup>
  173. <uni-popup ref="showExpireEquityCard">
  174. <view class="flex-col justify-start expirePopup" >
  175. <view class="flex-row justify-center">
  176. <text class="popupTitle">到期提醒</text>
  177. </view>
  178. <scroll-view scroll-y class="flex-col justify-start" :class="[ expireEquityCard.length > 1 ? 'scroll-y1':'scroll-y']" >
  179. <view class="flex-row listView" v-for="(item,index) in expireEquityCard">
  180. <view class="h-text flex-col justify-center ">
  181. <view class="money">
  182. <text>{{ item.faceValue }}</text>
  183. </view>
  184. </view>
  185. <view class="h-center-content flex-col justify-around">
  186. <view class="h-value">
  187. <text>{{ item.title }}</text>
  188. </view>
  189. <view class="title1">
  190. 服务对象:{{ item.serviceObjectName || '' }}
  191. </view>
  192. <view class="title1">
  193. 适用门店:{{ item.useStoreDesc || '' }}
  194. </view>
  195. <view class="title1">
  196. 到期时间:{{ item.effectiveEndTime.slice(0,10) }}
  197. </view>
  198. </view>
  199. <view class="h-right-content flex-col justify-center ">
  200. <view class="btn1" @click="upgrade(item)">
  201. <text>续费</text>
  202. </view>
  203. </view>
  204. </view>
  205. </scroll-view>
  206. <view class="expire-popup-footer">
  207. <view class="no-more-prompt" @click="noMoreExpirePrompt = !noMoreExpirePrompt">
  208. <view class="checkbox" :class="{ checked: noMoreExpirePrompt }">
  209. <text v-if="noMoreExpirePrompt" class="check-icon">✓</text>
  210. </view>
  211. <text class="no-more-text">不再提示</text>
  212. </view>
  213. <view class="close-btn" @click="closeExpirePopup">关闭</view>
  214. </view>
  215. </view>
  216. </uni-popup>
  217. <uni-popup ref="upgradePopup" type="center">
  218. <view class="upgradePopupView">
  219. <view class="upgradeTitle">请选择升级活动</view>
  220. <scroll-view class="upgradeScroll" scroll-y>
  221. <view class="upgradeItem" v-for="(act,idx) in upgradeActivityList" :key="idx" @click="selectUpgradeActivity(idx)">
  222. <view class="upgradeItemTitle">{{act.title}}</view>
  223. <view class="upgradeItemPrice">活动价格:<text class="upgradePrice">{{act.salePrice}}元</text></view>
  224. </view>
  225. </scroll-view>
  226. <view class="upgradeCloseBtn" @click="closeUpgradePopup">取消</view>
  227. </view>
  228. </uni-popup>
  229. </view>
  230. </template>
  231. <script>
  232. import myPay from '../../components/pay/pay';
  233. export default {
  234. components: {
  235. myPay
  236. },
  237. data() {
  238. return {
  239. recommendActivity:null,
  240. msgType:null,
  241. configContent:'',
  242. timeoutId:null,
  243. templateId:[],
  244. //服务对象列表
  245. serviceObjectList:[],
  246. //服务人员列表
  247. serviceTeacherList:[],
  248. userInfo: {},
  249. //服务门店
  250. store: {},
  251. //服务日期列表
  252. periodDateList:[],
  253. //当前选择的服务日期
  254. periodDate: {},
  255. //当前选择的日期下标
  256. periodDateIndex:0,
  257. //预约费用
  258. price: '0',
  259. //订单编号
  260. subOrderNo:'',
  261. selectIcon: false,
  262. orderParam:{
  263. orderType: 1,
  264. serviceAttribute: 2,
  265. serviceStoreId: '',
  266. remark: '',
  267. serviceDate:'',
  268. childService:[
  269. // {
  270. // serviceObjectId: '',
  271. // facePhotoUrl:'', //回显需要,不做参数
  272. // nickName:'', //回显需要,不做参数
  273. // serviceUserId: '',
  274. // personName:'',//回显需要,不做参数
  275. // fee:'',//回显需要,不做参数
  276. // serviceStartTime: '',
  277. // serviceTeacherList:[],//服务人员列表,回显需要,不做参数
  278. // serviceTimeList:[]//服务时段列表,回显需要,不做参数
  279. // }
  280. ]
  281. },
  282. takeNumberData:{
  283. pageNum:1,
  284. pageSize:10,
  285. dictType:'tomorrow_make_rule'
  286. },
  287. takeNumberRules:[],
  288. storeInfo: {},
  289. expireEquityCard:[], //过期的权益卡
  290. noMoreExpirePrompt: false, // 权益卡到期弹框不再提示
  291. upgradeActivityList:[],
  292. activityImg:'',
  293. }
  294. },
  295. onLoad() {
  296. this.store = uni.getStorageSync('storeInfo')
  297. this.orderParam.serviceStoreId = this.store.storeId
  298. this.timeoutId = setTimeout(()=>{
  299. uni.showModal({
  300. title:'温馨提示',
  301. content:'您在下单页面停留太久,请重新进入!',
  302. showCancel:false,
  303. success:res=>{
  304. if (res.confirm){
  305. uni.switchTab({
  306. url: '/pages/index/index',
  307. })
  308. }
  309. }
  310. })
  311. },1000*60*5)
  312. this.getExpireEquityCard();
  313. this.getRecommendActivity();
  314. },
  315. onShow() {
  316. this.getActivityImg()
  317. //获取弹窗设置
  318. let reservationQueueContent = uni.getStorageSync('reservation_queue_content');
  319. if (!reservationQueueContent){
  320. this.getConfigKey('reservation_queue_content')
  321. }
  322. this.userInfo = uni.getStorageSync('userInfo')
  323. // 查询门店信息
  324. const data = uni.getStorageSync('storeInfo');
  325. this.store = uni.getStorageSync('storeInfo')
  326. if (!data) {
  327. // 获取位置信息查询门店列表数据
  328. this.getLocation();
  329. } else {
  330. this.storeInfo = data;
  331. }
  332. this.orderParam.childService = []
  333. this.price = 0
  334. //获取排班日期
  335. this.selectDate()
  336. this.getTemplateList()
  337. this.getSelectionRules(this.takeNumberData)
  338. },
  339. onUnload(){
  340. clearTimeout(this.timeoutId);
  341. },
  342. methods: {
  343. getActivityImg(){
  344. this.$api.getSelectionRules({
  345. dictType:'recommended_images'
  346. }).then(res => {
  347. if (res.data.rows.length > 0){
  348. let url = this.$activityImgUrl
  349. this.activityImg = url + res.data.rows[0].dictValue
  350. console.log("++++++++++this.activityImg++++++++++",this.activityImg)
  351. }
  352. })
  353. },
  354. goDetail(e){
  355. uni.navigateTo({
  356. url:'/orderPages/activityDetail/activityDetail?id=' + e.id
  357. })
  358. },
  359. getRecommendActivity(){
  360. this.$api.getRecommendActivity().then(res=>{
  361. this.recommendActivity = res.data.data
  362. })
  363. },
  364. navigateTo(item){
  365. if(item.activityId){
  366. let list = item.activityId.split(',')
  367. if (list.length == 1){
  368. uni.navigateTo({
  369. url:'/orderPages/activityDetail/activityDetail?id=' + item.activityId +'&renewServiceObjectId=' + item.serviceObjectId
  370. })
  371. }else {
  372. uni.navigateTo({
  373. url:'/orderPages/activityList/activityList?renewServiceObjectId=' + item.serviceObjectId + '&equityCardId=' + item.equityCardId
  374. })
  375. }
  376. }else{
  377. uni.navigateTo({
  378. url:'/orderPages/activityList/activityList'
  379. })
  380. }
  381. },
  382. getExpireEquityCard(){
  383. this.$api.getExpireEquityCard({
  384. serviceObjectId:0
  385. }).then((res)=>{
  386. let list = res.data.data || [];
  387. // 过滤掉用户已标记"不再提示"的卡片
  388. const dismissedIds = uni.getStorageSync('dismissed_expire_equity_cards') || []
  389. const validDismissedIds = []
  390. const newList = []
  391. for (const item of list) {
  392. if (dismissedIds.includes(item.equityCardId)) {
  393. validDismissedIds.push(item.equityCardId)
  394. } else {
  395. newList.push(item)
  396. }
  397. }
  398. // 清理已失效的 dismissed 记录
  399. uni.setStorageSync('dismissed_expire_equity_cards', validDismissedIds)
  400. this.expireEquityCard = newList
  401. if (this.expireEquityCard.length > 0){
  402. this.noMoreExpirePrompt = false
  403. this.$refs.showExpireEquityCard.open()
  404. }
  405. })
  406. },
  407. closeExpirePopup() {
  408. if (this.noMoreExpirePrompt) {
  409. const dismissedIds = uni.getStorageSync('dismissed_expire_equity_cards') || []
  410. for (const item of this.expireEquityCard) {
  411. if (item.equityCardId && !dismissedIds.includes(item.equityCardId)) {
  412. dismissedIds.push(item.equityCardId)
  413. }
  414. }
  415. uni.setStorageSync('dismissed_expire_equity_cards', dismissedIds)
  416. }
  417. this.$refs.showExpireEquityCard.close()
  418. },
  419. upgrade(item){
  420. console.log(item,'itemitem')
  421. if (!item.equityCardId){
  422. uni.showToast({
  423. title: '当前权益卡暂无可升级活动',
  424. icon: 'none'
  425. })
  426. return
  427. }
  428. uni.showLoading({title: '加载中'})
  429. this.$api.upgradeList(item.equityCardId).then(res=>{
  430. uni.hideLoading()
  431. const list = (res && res.data && (res.data.data || res.data.rows)) || []
  432. if (!list || list.length === 0){
  433. uni.showToast({
  434. title: '当前权益卡暂无可升级活动',
  435. icon: 'none'
  436. })
  437. return
  438. }
  439. this.currentUpgradeItem = item
  440. if (list.length === 1){
  441. this.goUpgradeDetail(list[0], item)
  442. }else {
  443. this.upgradeActivityList = list
  444. this.$refs.upgradePopup.open()
  445. }
  446. }).catch(()=>{
  447. uni.hideLoading()
  448. })
  449. },
  450. goUpgradeDetail(activity, item){
  451. console.log(activity, item,'activity, item')
  452. if (!activity || !activity.id){
  453. return
  454. }
  455. let url = '/orderPages/activityDetail/activityDetail?id=' + activity.id + '&upgradeEquityCardId=' + item.id
  456. if (item.serviceObjectId){
  457. url += '&renewServiceObjectId=' + item.serviceObjectId
  458. }
  459. uni.navigateTo({url})
  460. },
  461. closeUpgradePopup() {
  462. this.$refs.upgradePopup.close()
  463. },
  464. selectUpgradeActivity(idx) {
  465. const activity = this.upgradeActivityList[idx]
  466. this.goUpgradeDetail(activity, this.currentUpgradeItem)
  467. this.$refs.upgradePopup.close()
  468. },
  469. dialogConfirm(){
  470. this.configContent = '';
  471. },
  472. dialogClose(){
  473. uni.setStorageSync('reservation_queue_content',true);
  474. this.configContent = '';
  475. },
  476. getConfigKey(key){
  477. this.$api.getConfigKey({key:key}).then(res=>{
  478. console.log('获取到的配置信息',res.data.msg)
  479. if (res.data.msg){
  480. //打开弹窗
  481. this.configContent = res.data.msg
  482. this.$refs.reservationQueuePopup.open()
  483. }
  484. })
  485. },
  486. // 获取门店列表数据
  487. getStoreListData(data) {
  488. let that = this;
  489. // 用户绑定门店
  490. this.$api.storeList(data).then((res) => {
  491. that.storeInfo = res.data.data[0]
  492. // 更新用户选择的门店信息
  493. uni.setStorageSync('storeInfo', res.data.data[0])
  494. })
  495. },
  496. // 获取经纬度信息
  497. getLocation() {
  498. let that = this
  499. uni.getLocation({
  500. type: 'gcj02',
  501. success: function (res) {
  502. let latitude = res.latitude; // 纬度
  503. let longitude = res.longitude; // 经度
  504. let speed = res.speed; // 速度
  505. let accuracy = res.accuracy; // 精确度
  506. // 在这里可以对位置信息进行处理
  507. console.log("纬度:" + latitude + ";经度" + longitude)
  508. that.reqParm.latitude = latitude
  509. that.reqParm.longitude = longitude
  510. uni.setStorageSync('location', that.reqParm)
  511. that.getStoreListData(that.reqParm)
  512. },
  513. fail:function (fail) {
  514. that.getStoreListData(that.reqParm)
  515. },
  516. complete:function (complete) {
  517. console.log('获取用户地址失败or成功==》',complete)
  518. }
  519. });
  520. },
  521. // 去选择门店
  522. gotoStoreChoose() {
  523. uni.setStorageSync('router','2')
  524. uni.navigateTo({
  525. url: '/storePages/store/store-choose?type=1',
  526. })
  527. },
  528. back(){
  529. uni.switchTab({
  530. url: '/pages/index/index',
  531. })
  532. },
  533. clickPeriodDateList(e){
  534. this.periodDateIndex = e.index
  535. this.periodDate = e
  536. this.orderParam.serviceDate=this.periodDate.label
  537. //对所有子订单的服务人员及服务时段重新赋值
  538. this.getServicePerson(this.periodDate.label,true)
  539. },
  540. openSetting(){
  541. if (!this.userInfo.phone){
  542. uni.showModal({
  543. title:'温馨提示',
  544. content:'预约叫号是通过手机尾号进行查询,是否确认绑定手机号',
  545. success:res=>{
  546. if (res.confirm){
  547. uni.navigateTo({
  548. url: '/myPages/setting/setting-telphone',
  549. })
  550. }
  551. }
  552. })
  553. return
  554. }
  555. let flag = false
  556. this.orderParam.childService.forEach(i=>{
  557. if (!i.serviceStartTime || i.serviceStartTime == ''){
  558. uni.$u.toast('有服务对象没有选择服务时段')
  559. flag=true
  560. return
  561. }
  562. })
  563. if (flag){
  564. return;
  565. }
  566. uni.requestSubscribeMessage({
  567. tmplIds: this.templateId,
  568. success: (res) =>{
  569. let {errMsg,...param} = res
  570. this.$api.updateSubscribe(param).then(res=>{
  571. console.log('+++++++++++++updateSubscribe+++++++++++++',res)
  572. })
  573. },
  574. fail:(err)=>{
  575. console.log('+++++++++++++fail+++++++++++++',err)
  576. },
  577. complete:(complete)=>{
  578. this.commitOrder()
  579. }
  580. })
  581. },
  582. getTemplateList(){
  583. this.$api.getTemplateList({
  584. type:1
  585. }).then(res=>{
  586. this.templateId=res.data.data.data.map(item=>{
  587. return item.priTmplId
  588. })
  589. })
  590. },
  591. improperClose(){
  592. uni.switchTab({
  593. url: '/pages/order/index'
  594. })
  595. },
  596. bindPickerChange(e){
  597. if (e.detail.value == this.periodDateIndex){
  598. return
  599. }
  600. this.periodDateIndex = e.detail.value
  601. this.periodDate = this.periodDateList[e.detail.value]
  602. this.orderParam.serviceDate=this.periodDate.label
  603. //对所有子订单的服务人员及服务时段重新赋值
  604. this.getServicePerson(this.periodDate.label,true)
  605. },
  606. //获取排班日期
  607. selectDate() {
  608. this.$api.selectDate({
  609. organization: this.store.storeId
  610. }).then(res => {
  611. this.periodDate = res.data.data[0]
  612. this.periodDateList = res.data.data
  613. for (const argument of this.periodDateList) {
  614. let month = argument.label.substring(5,6) == 0 ? argument.label.substring(6,7) : argument.label.substring(5,7)
  615. let day = argument.label.substring(8,9) == 0 ? argument.label.substring(9,10) : argument.label.substring(8,10)
  616. argument.name =month + '月' + day +'日'
  617. }
  618. this.orderParam.serviceDate=this.periodDate.label
  619. this.getServicePerson(this.periodDate.label,false)
  620. })
  621. },
  622. // 查询服务工作人员列表
  623. getServicePerson(date,bindPickerChange) {
  624. this.$api.getServicePerson({
  625. storeId:this.store.storeId,
  626. date:date
  627. }).then((res) => {
  628. this.serviceTeacherList = res.data.data;
  629. if (this.serviceTeacherList.length > 0){
  630. this.serviceTeacherList[0].select = true
  631. this.getServicePersonUrl(this.serviceTeacherList);
  632. }
  633. if (bindPickerChange){
  634. if (this.orderParam.childService.length === 0){
  635. // this.selectServiceObject(this.serviceObjectList[0])
  636. }else {
  637. this.serviceObjectList.forEach(i=>{
  638. if (i.select){
  639. this.orderParam.childService=[]
  640. i.select = false
  641. this.selectServiceObject(i)
  642. }
  643. })
  644. }
  645. }else {
  646. this.listServiceObject()
  647. }
  648. })
  649. },
  650. getServicePersonUrl(items){
  651. for (let i = 0; i < items.length; i++) {
  652. if (items[i].facePhoto) {
  653. this.$api.getImgUrlByOssId({
  654. ossId: items[i].facePhoto
  655. }).then(res => {
  656. items[i].facePhotoUrl = res.data.data[0].url.replace(/^http:/, "https:")
  657. this.$set(this.serviceTeacherList, i, items[i])
  658. })
  659. }
  660. }
  661. },
  662. // 查询服务对象信息列表
  663. listServiceObject() {
  664. this.$api.listServiceObject(this.reqParm).then((res) => {
  665. this.serviceObjectList = res.data.data
  666. this.getServiceObjectUrl(this.serviceObjectList);
  667. })
  668. },
  669. // 获取图片
  670. getServiceObjectUrl(items) {
  671. for (let i = 0; i < items.length; i++) {
  672. if (items[i].facePhoto) {
  673. this.$api.getImgUrlByOssId({
  674. ossId: items[i].facePhoto
  675. }).then(res => {
  676. items[i].facePhotoUrl = res.data.data[0].url.replace(/^http:/, "https:")
  677. this.$set(this.serviceObjectList, i, items[i])
  678. })
  679. }
  680. if (i === 0){
  681. // this.selectServiceObject(items[i])
  682. }
  683. }
  684. },
  685. selectServiceObject(item) {
  686. if (!this.serviceTeacherList || this.serviceTeacherList.length==0){
  687. uni.showModal({
  688. title:"温馨提示",
  689. content:"今日线上号段已拿完,理发可先电话咨询门店",
  690. showCancel:false,
  691. confirmText:"知道了"
  692. })
  693. return
  694. }
  695. if (item.select) {
  696. this.orderParam.childService = this.orderParam.childService.filter(selectServiceObject =>
  697. selectServiceObject.serviceObjectId !== item.id)
  698. item.select = !item.select
  699. this.price = 0
  700. for (let childService of this.orderParam.childService) {
  701. this.price = this.price * 1 + childService.fee * 1
  702. this.price = this.price.toFixed(2)
  703. }
  704. } else {
  705. uni.showModal({
  706. title:"温馨提示",
  707. content:"当前默认门店为" + this.storeInfo.storeName + "是否需要更换",
  708. showCancel:false,
  709. confirmText:"知道了"
  710. })
  711. this.$api.getServicePersonTime({
  712. personId: this.serviceTeacherList[0].personId,
  713. date: this.periodDate.label,
  714. storeId:this.store.storeId
  715. }).then(res => {
  716. item.select = !item.select
  717. let selectServiceObjectList = this.orderParam.childService
  718. let periodTimeList = res.data.data
  719. if (!res.data.data || res.data.data.length==0){
  720. //这里只为了断开技师列表的应用关系
  721. let serviceTeacherListStr = JSON.stringify(this.serviceTeacherList)
  722. let serviceTeacherList = JSON.parse(serviceTeacherListStr)
  723. let childService ={
  724. serviceObjectId: item.id,
  725. facePhotoUrl:item.facePhotoUrl, //回显需要,不做参数
  726. nickName:item.nickName, //回显需要,不做参数
  727. serviceUserId: serviceTeacherList[0].personId,
  728. levelId: serviceTeacherList[0].levelId,
  729. fee:0,//回显需要,不做参数
  730. serviceStartTime: '',
  731. serviceTeacherList:serviceTeacherList,//服务人员列表,回显需要,不做参数
  732. serviceTimeList:periodTimeList//服务时段列表,回显需要,不做参数
  733. }
  734. this.orderParam.childService.push(childService)
  735. this.price = 0
  736. for (let childService of this.orderParam.childService) {
  737. this.price = this.price * 1 + childService.fee * 1
  738. this.price = this.price.toFixed(2)
  739. }
  740. return
  741. }
  742. //选择服务对象时,获取的排班时间为全部技师的排班时间,所以只要某个时段被选过,那么这个时段的数量-1
  743. selectServiceObjectList.forEach(selectServiceObject =>{
  744. periodTimeList.forEach(periodTime =>{
  745. if (selectServiceObject.serviceStartTime == periodTime.label ){
  746. periodTime.total = periodTime.total - 1
  747. }
  748. })
  749. })
  750. let date = null //系统为当前服务对象分配的时间
  751. for (const time of periodTimeList) {
  752. if (time.total>0){
  753. time.select = true
  754. date = time
  755. //为当前服务对象分配时间段成功时,需要将以前的服务对象的可选择的时间段的total -1
  756. selectServiceObjectList.forEach(selectServiceObject =>{
  757. if (selectServiceObject.serviceUserId === -1){
  758. //如果子订单没有指定技师,则对应的时段-1
  759. selectServiceObject.serviceTimeList.forEach(t=>{
  760. if (t.label == date.label){
  761. t.total = t.total -1
  762. }
  763. })
  764. }else {
  765. selectServiceObject.serviceTimeList.forEach(t=>{
  766. //如果子订单指定技师,且该技师的服务时段未被选中,则对应的时段-1
  767. if (t.label == date.label && !t.select){
  768. t.total = t.total -1
  769. }
  770. })
  771. }
  772. })
  773. break
  774. }
  775. }
  776. //这里只为了断开技师列表的应用关系
  777. let serviceTeacherListStr = JSON.stringify(this.serviceTeacherList)
  778. let serviceTeacherList = JSON.parse(serviceTeacherListStr)
  779. //创建子订单项
  780. let childService ={
  781. serviceObjectId: item.id,
  782. facePhotoUrl:item.facePhotoUrl, //回显需要,不做参数
  783. nickName:item.nickName, //回显需要,不做参数
  784. serviceUserId: serviceTeacherList[0].personId,
  785. levelId: serviceTeacherList[0].levelId,
  786. fee:serviceTeacherList[0].fee,//回显需要,不做参数
  787. serviceStartTime: date.label,
  788. serviceTeacherList:serviceTeacherList,//服务人员列表,回显需要,不做参数
  789. serviceTimeList:periodTimeList//服务时段列表,回显需要,不做参数
  790. }
  791. this.orderParam.childService.push(childService)
  792. this.price = 0
  793. for (let childService of this.orderParam.childService) {
  794. this.price = this.price * 1 + childService.fee * 1
  795. this.price = this.price.toFixed(2)
  796. }
  797. })
  798. }
  799. },
  800. selectServiceTeach(items,index,index1){
  801. items.forEach(e=>{
  802. e.select=false
  803. })
  804. items[index1].select =true
  805. this.orderParam.childService[index].fee = items[index1].fee
  806. this.orderParam.childService[index].serviceUserId = items[index1].personId
  807. this.orderParam.childService[index].levelId = items[index1].levelId
  808. this.$api.getServicePersonTime({
  809. personId: items[index1].personId,
  810. date: this.periodDate.label,
  811. storeId:this.store.storeId
  812. }).then(res => {
  813. let serviceTimeList = res.data.data
  814. if (!serviceTimeList || serviceTimeList.length == 0){
  815. this.orderParam.childService[index].serviceStartTime = ''
  816. this.orderParam.childService[index].periodTimeList = []
  817. this.orderParam.childService[index].fee = 0
  818. this.price = 0
  819. for (let childService of this.orderParam.childService) {
  820. this.price = this.price * 1 + childService.fee * 1
  821. this.price = this.price.toFixed(2)
  822. }
  823. this.$forceUpdate()
  824. }else {
  825. let selectServiceObjectList = this.orderParam.childService.filter(selectServiceObject =>
  826. (selectServiceObject.serviceUserId === items[index1].personId
  827. && selectServiceObject.serviceObjectId !== this.orderParam.childService[index].serviceObjectId)
  828. || selectServiceObject.serviceUserId === -1
  829. )
  830. selectServiceObjectList.forEach(selectServiceObject =>{
  831. serviceTimeList.forEach(periodTime =>{
  832. if (selectServiceObject.serviceStartTime === periodTime.label ){
  833. if (selectServiceObject.serviceUserId === -1){
  834. selectServiceObject.serviceTimeList.forEach(t=>{
  835. if (t.label == periodTime.label && t.total === 1){
  836. periodTime.total = periodTime.total - 1
  837. }
  838. })
  839. }else {
  840. periodTime.total = periodTime.total - 1
  841. }
  842. }
  843. })
  844. })
  845. for (const time of serviceTimeList) {
  846. if (time.total>0){
  847. time.select = true
  848. break
  849. }
  850. }
  851. serviceTimeList[0].select = true
  852. this.orderParam.childService[index].serviceStartTime= serviceTimeList[0].label,
  853. this.orderParam.childService[index].serviceTimeList= serviceTimeList
  854. }
  855. })
  856. this.price = 0
  857. for (let childService of this.orderParam.childService) {
  858. this.price = this.price * 1 + childService.fee * 1
  859. this.price = this.price.toFixed(2)
  860. }
  861. this.$forceUpdate()
  862. },
  863. selectServiceTime(items,index,index2){
  864. items.forEach(e=>{
  865. e.select=false
  866. })
  867. items[index2].select =true // 新选中的时间
  868. // let selectServiceObject = this.orderParam.childService[index] //旧的时间
  869. // this.orderParam.childService.forEach(i=>{
  870. // if (selectServiceObject.serviceUserId === -1){
  871. // i.serviceTimeList.forEach(t=>{
  872. // if (t.label == selectServiceObject.serviceStartTime && !t.select ){
  873. // console.log('-1----------加1')
  874. // t.total +=1
  875. // }
  876. // if (t.label == items[index2].serviceStartTime && i.serviceObjectId != selectServiceObject.serviceObjectId){
  877. // console.log('-1----------减1')
  878. // t.total -=1
  879. // }
  880. // })
  881. // }else {
  882. // if (selectServiceObject.serviceUserId == i.serviceUserId){
  883. // i.serviceTimeList.forEach(t=>{
  884. // if (t.label == selectServiceObject.serviceStartTime && !t.select ){
  885. // t.total +=1
  886. // }
  887. // if (t.label == items[index2].serviceStartTime && i.serviceObjectId != selectServiceObject.serviceObjectId){
  888. // t.total -=1
  889. // }
  890. // })
  891. // }
  892. // }
  893. // })
  894. this.orderParam.childService[index].serviceStartTime = items[index2].label
  895. this.$forceUpdate()
  896. },
  897. selectChange() {
  898. this.selectIcon = !this.selectIcon
  899. },
  900. goTermsOfService() {
  901. uni.navigateTo({
  902. url: '/myPages/TermsOfService/index?name=' + '预约需知' + '&type=' + 5
  903. })
  904. },
  905. //支付组件回调
  906. payResult(e){
  907. console.log(e)
  908. if(e.payResult){
  909. uni.showToast({
  910. title: '支付成功!'
  911. });
  912. }else {
  913. uni.showToast({
  914. title: e.res.data.msg,
  915. icon: 'error'
  916. });
  917. }
  918. setTimeout(()=>{
  919. uni.switchTab({
  920. url: '/pages/order/index'
  921. })
  922. },1000)
  923. },
  924. //提交订单
  925. commitOrder() {
  926. if (this.subOrderNo){
  927. this.$refs.myPay.openPopup()
  928. }else {
  929. if (!this.selectIcon) {
  930. uni.$u.toast('请阅读并同意《预约需知》')
  931. return;
  932. }
  933. if (this.orderParam.childService.length === 0) {
  934. uni.$u.toast('请选择服务对象')
  935. return;
  936. }
  937. if (this.requestStatus) {
  938. return;
  939. }
  940. this.requestStatus = true
  941. uni.showLoading({
  942. title: '加载中'
  943. });
  944. this.$api.commonGeneralOrder(this.orderParam).then(res => {
  945. console.log('++++++++++++++++++订单提交+++++++++++', res)
  946. if (res.data.data.subOrderNo) {
  947. uni.hideLoading();
  948. this.subOrderNo = res.data.data.subOrderNo
  949. this.$refs.myPay.openPopup()
  950. } else {
  951. uni.hideLoading();
  952. uni.$u.toast('预约成功')
  953. setTimeout(() => {
  954. uni.switchTab({
  955. url: '/pages/order/index'
  956. })
  957. }, 500)
  958. }
  959. this.requestStatus = false
  960. }).catch(err => {
  961. this.requestStatus = false
  962. })
  963. }
  964. },
  965. getSelectionRules(data){
  966. this.$api.getSelectionRules(data).then(res=>{
  967. this.takeNumberRules = res.data.rows
  968. })
  969. },
  970. }
  971. }
  972. </script>
  973. <style scoped lang="scss">
  974. @import './index.rpx.scss';
  975. .store-wrap {
  976. margin-top: 10rpx;
  977. background-color: white;
  978. .store-info {
  979. display: flex;
  980. .logo {
  981. width: 10%;
  982. text-align: center;
  983. display: flex;
  984. justify-content: center;
  985. align-items: center;
  986. image {
  987. width: 30px;
  988. height: 30px;
  989. }
  990. }
  991. .store-content {
  992. width: 90%;
  993. padding-bottom: 13px;
  994. .h-row {
  995. display: flex;
  996. align-items: center;
  997. justify-content: space-between;
  998. .store-desc {
  999. width: 90%;
  1000. display: flex;
  1001. line-height: 30px;
  1002. font-size: 14px;
  1003. .store-name {
  1004. }
  1005. }
  1006. .arrow-right {
  1007. text-align: right;
  1008. margin: 0 auto;
  1009. cursor: pointer;
  1010. padding-top: 3px;
  1011. width: 100px;
  1012. display: flex;
  1013. font-size: 14px;
  1014. .change-store {
  1015. text-align: right;
  1016. color: #666;
  1017. }
  1018. image {
  1019. width: 18px;
  1020. height: 18px;
  1021. }
  1022. }
  1023. .address {
  1024. color: #999999;
  1025. width: 450rpx;
  1026. font-size: 24rpx;
  1027. }
  1028. .address1 {
  1029. color: #999999;
  1030. font-size: 24rpx;
  1031. padding-right: 40rpx;
  1032. }
  1033. }
  1034. }
  1035. }
  1036. .adress {
  1037. font-size: 22rpx;
  1038. white-space: nowrap;
  1039. overflow: hidden;
  1040. text-overflow: ellipsis;
  1041. padding-left: 80rpx;
  1042. color: #666;
  1043. }
  1044. }
  1045. .agree-checkbox {
  1046. width: 34rpx;
  1047. height: 34rpx;
  1048. border: 2rpx solid #ccc;
  1049. border-radius: 8rpx;
  1050. display: flex;
  1051. align-items: center;
  1052. justify-content: center;
  1053. margin-right: 10rpx;
  1054. flex-shrink: 0;
  1055. &.checked {
  1056. background-color: #FFE05C;
  1057. border-color: #FFE05C;
  1058. }
  1059. .check-icon {
  1060. color: #333;
  1061. font-size: 22rpx;
  1062. font-weight: bold;
  1063. }
  1064. }
  1065. .agree-text {
  1066. font-size: 26rpx;
  1067. color: #666;
  1068. margin-right: 6rpx;
  1069. }
  1070. .agree-link {
  1071. font-size: 26rpx;
  1072. color: #2979ff;
  1073. }
  1074. .expire-popup-footer {
  1075. display: flex;
  1076. align-items: center;
  1077. justify-content: space-between;
  1078. padding: 20rpx 32rpx 30rpx;
  1079. .no-more-prompt {
  1080. display: flex;
  1081. align-items: center;
  1082. .checkbox {
  1083. width: 32rpx;
  1084. height: 32rpx;
  1085. border: 2rpx solid #ccc;
  1086. border-radius: 6rpx;
  1087. display: flex;
  1088. align-items: center;
  1089. justify-content: center;
  1090. margin-right: 10rpx;
  1091. &.checked {
  1092. background-color: #2979ff;
  1093. border-color: #2979ff;
  1094. }
  1095. .check-icon {
  1096. color: #fff;
  1097. font-size: 22rpx;
  1098. font-weight: bold;
  1099. }
  1100. }
  1101. .no-more-text {
  1102. font-size: 26rpx;
  1103. color: #666;
  1104. }
  1105. }
  1106. .close-btn {
  1107. padding: 10rpx 36rpx;
  1108. background-color: #2979ff;
  1109. color: #fff;
  1110. font-size: 28rpx;
  1111. border-radius: 30rpx;
  1112. }
  1113. }
  1114. </style>