index.vue 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017
  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 :style="{'height':'236rpx'}"></view>
  139. <view class="flex-col group2 ">
  140. <view class="btnTitle flex-row">
  141. <u-icon v-if="selectIcon" name="checkmark-circle-fill" color="#FFE52C" size="18"
  142. @click="selectChange"></u-icon>
  143. <u-icon v-else name="/static/order/ud9.png" color="#FFE52C" size="18" @click="selectChange"></u-icon>
  144. <text :style="{'margin-left':'10rpx'}">请阅读并同意</text>
  145. <text :style="{'color':'red'}" @click="goTermsOfService">《预约需知》</text>
  146. </view>
  147. <view class="btn flex-row justify-between">
  148. <view>
  149. <text class="title">待支付</text>
  150. <text class="num">{{price}}</text>
  151. </view>
  152. <view class="btnRight" @click="openSetting">
  153. <text>提交</text>
  154. </view>
  155. </view>
  156. </view>
  157. <myPay ref="myPay" :selectBlPay="userInfo.balance *1 >= price *1" :balance="userInfo.balance" :totalAmount="price" :storeId="store.storeId"
  158. :orderNo="subOrderNo" @payResult="payResult" @improperClose="improperClose"></myPay>
  159. <uni-popup ref="reservationQueuePopup">
  160. <uni-popup-dialog :type="msgType" cancelText="不再提示" confirmText="已知晓" title="提示" :content="configContent" @confirm="dialogConfirm"
  161. @close="dialogClose"></uni-popup-dialog>
  162. </uni-popup>
  163. <uni-popup ref="showExpireEquityCard">
  164. <view class="flex-col justify-start expirePopup" >
  165. <view class="flex-row justify-center">
  166. <text class="popupTitle">到期提醒</text>
  167. </view>
  168. <scroll-view scroll-y class="flex-col justify-start" :class="[ expireEquityCard.length > 1 ? 'scroll-y1':'scroll-y']" >
  169. <view class="flex-row listView" v-for="(item,index) in expireEquityCard">
  170. <view class="h-text flex-col justify-center ">
  171. <view class="money">
  172. <text>{{ item.faceValue }}</text>
  173. </view>
  174. </view>
  175. <view class="h-center-content flex-col justify-around">
  176. <view class="h-value">
  177. <text>{{ item.title }}</text>
  178. </view>
  179. <view class="title1">
  180. 服务对象:{{ item.serviceObjectName || '' }}
  181. </view>
  182. <view class="title1">
  183. 适用门店:{{ item.useStoreDesc || '' }} {{ item.use_store_desc || '' }} {{ item.useStoreDesc || '' }} {{ item.useStoreDesc || '' }}
  184. </view>
  185. <view class="title1">
  186. 到期时间:{{ item.effectiveEndTime.slice(0,10) }}
  187. </view>
  188. </view>
  189. <view class="h-right-content flex-col justify-center ">
  190. <view class="btn1" @click="navigateTo(item)">
  191. <text>续费</text>
  192. </view>
  193. </view>
  194. </view>
  195. </scroll-view>
  196. </view>
  197. </uni-popup>
  198. </view>
  199. </template>
  200. <script>
  201. import myPay from '../../components/pay/pay';
  202. export default {
  203. components: {
  204. myPay
  205. },
  206. data() {
  207. return {
  208. msgType:null,
  209. configContent:'',
  210. timeoutId:null,
  211. templateId:[],
  212. //服务对象列表
  213. serviceObjectList:[],
  214. //服务人员列表
  215. serviceTeacherList:[],
  216. userInfo: {},
  217. //服务门店
  218. store: {},
  219. //服务日期列表
  220. periodDateList:[],
  221. //当前选择的服务日期
  222. periodDate: {},
  223. //当前选择的日期下标
  224. periodDateIndex:0,
  225. //预约费用
  226. price: '0',
  227. //订单编号
  228. subOrderNo:'',
  229. selectIcon: true,
  230. orderParam:{
  231. orderType: 1,
  232. serviceAttribute: 2,
  233. serviceStoreId: '',
  234. remark: '',
  235. serviceDate:'',
  236. childService:[
  237. // {
  238. // serviceObjectId: '',
  239. // facePhotoUrl:'', //回显需要,不做参数
  240. // nickName:'', //回显需要,不做参数
  241. // serviceUserId: '',
  242. // personName:'',//回显需要,不做参数
  243. // fee:'',//回显需要,不做参数
  244. // serviceStartTime: '',
  245. // serviceTeacherList:[],//服务人员列表,回显需要,不做参数
  246. // serviceTimeList:[]//服务时段列表,回显需要,不做参数
  247. // }
  248. ]
  249. },
  250. takeNumberData:{
  251. pageNum:1,
  252. pageSize:10,
  253. dictType:'tomorrow_make_rule'
  254. },
  255. takeNumberRules:[],
  256. storeInfo: {},
  257. expireEquityCard:[], //过期的权益卡
  258. }
  259. },
  260. onLoad() {
  261. this.store = uni.getStorageSync('storeInfo')
  262. this.orderParam.serviceStoreId = this.store.storeId
  263. this.timeoutId = setTimeout(()=>{
  264. uni.showModal({
  265. title:'温馨提示',
  266. content:'您在下单页面停留太久,请重新进入!',
  267. showCancel:false,
  268. success:res=>{
  269. if (res.confirm){
  270. uni.switchTab({
  271. url: '/pages/index/index',
  272. })
  273. }
  274. }
  275. })
  276. },1000*60*5)
  277. this.getExpireEquityCard();
  278. },
  279. onShow() {
  280. //获取弹窗设置
  281. let reservationQueueContent = uni.getStorageSync('reservation_queue_content');
  282. if (!reservationQueueContent){
  283. this.getConfigKey('reservation_queue_content')
  284. }
  285. this.userInfo = uni.getStorageSync('userInfo')
  286. // 查询门店信息
  287. const data = uni.getStorageSync('storeInfo');
  288. this.store = uni.getStorageSync('storeInfo')
  289. if (!data) {
  290. // 获取位置信息查询门店列表数据
  291. this.getLocation();
  292. } else {
  293. this.storeInfo = data;
  294. }
  295. this.orderParam.childService = []
  296. this.price = 0
  297. //获取排班日期
  298. this.selectDate()
  299. this.getTemplateList()
  300. this.getSelectionRules(this.takeNumberData)
  301. },
  302. onUnload(){
  303. clearTimeout(this.timeoutId);
  304. },
  305. methods: {
  306. navigateTo(item){
  307. if(item.activityId){
  308. let list = item.activityId.split(',')
  309. if (list.length == 1){
  310. uni.navigateTo({
  311. url:'/orderPages/activityDetail/activityDetail?id=' + item.activityId +'&renewServiceObjectId=' + item.serviceObjectId
  312. })
  313. }else {
  314. uni.navigateTo({
  315. url:'/orderPages/activityList/activityList?renewServiceObjectId=' + item.serviceObjectId + '&equityCardId=' + item.equityCardId
  316. })
  317. }
  318. }else{
  319. uni.navigateTo({
  320. url:'/orderPages/activityList/activityList'
  321. })
  322. }
  323. },
  324. getExpireEquityCard(){
  325. this.$api.getExpireEquityCard({
  326. serviceObjectId:0
  327. }).then((res)=>{
  328. this.expireEquityCard = res.data.data;
  329. // if (this.expireEquityCard.length > 0){
  330. // uni.showModal({
  331. // title:'温馨提示',
  332. // content:'您有' + this.expireEquityCard.length + '张权益卡即将到期',
  333. // confirmText:'立即续费',
  334. // success:(res)=>{
  335. // if (res.confirm) {
  336. // console.log('用户点击确定');
  337. // uni.navigateTo({
  338. // url:'/storePages/myRights/index'
  339. // })
  340. // } else if (res.cancel) {
  341. // console.log('用户点击取消');
  342. // }
  343. // }
  344. // })
  345. // }
  346. if (this.expireEquityCard.length > 0){
  347. this.$refs.showExpireEquityCard.open()
  348. }
  349. })
  350. },
  351. dialogConfirm(){
  352. this.configContent = '';
  353. },
  354. dialogClose(){
  355. uni.setStorageSync('reservation_queue_content',true);
  356. this.configContent = '';
  357. },
  358. getConfigKey(key){
  359. this.$api.getConfigKey({key:key}).then(res=>{
  360. console.log('获取到的配置信息',res.data.msg)
  361. if (res.data.msg){
  362. //打开弹窗
  363. this.configContent = res.data.msg
  364. this.$refs.reservationQueuePopup.open()
  365. }
  366. })
  367. },
  368. // 获取门店列表数据
  369. getStoreListData(data) {
  370. let that = this;
  371. // 用户绑定门店
  372. this.$api.storeList(data).then((res) => {
  373. that.storeInfo = res.data.data[0]
  374. // 更新用户选择的门店信息
  375. uni.setStorageSync('storeInfo', res.data.data[0])
  376. })
  377. },
  378. // 获取经纬度信息
  379. getLocation() {
  380. let that = this
  381. uni.getLocation({
  382. type: 'gcj02',
  383. success: function (res) {
  384. let latitude = res.latitude; // 纬度
  385. let longitude = res.longitude; // 经度
  386. let speed = res.speed; // 速度
  387. let accuracy = res.accuracy; // 精确度
  388. // 在这里可以对位置信息进行处理
  389. console.log("纬度:" + latitude + ";经度" + longitude)
  390. that.reqParm.latitude = latitude
  391. that.reqParm.longitude = longitude
  392. uni.setStorageSync('location', that.reqParm)
  393. that.getStoreListData(that.reqParm)
  394. },
  395. fail:function (fail) {
  396. that.getStoreListData(that.reqParm)
  397. },
  398. complete:function (complete) {
  399. console.log('获取用户地址失败or成功==》',complete)
  400. }
  401. });
  402. },
  403. // 去选择门店
  404. gotoStoreChoose() {
  405. uni.setStorageSync('router','2')
  406. uni.navigateTo({
  407. url: '/storePages/store/store-choose?type=1',
  408. })
  409. },
  410. back(){
  411. uni.switchTab({
  412. url: '/pages/index/index',
  413. })
  414. },
  415. clickPeriodDateList(e){
  416. this.periodDateIndex = e.index
  417. this.periodDate = e
  418. this.orderParam.serviceDate=this.periodDate.label
  419. //对所有子订单的服务人员及服务时段重新赋值
  420. this.getServicePerson(this.periodDate.label,true)
  421. },
  422. openSetting(){
  423. if (!this.userInfo.phone){
  424. uni.showModal({
  425. title:'温馨提示',
  426. content:'预约叫号是通过手机尾号进行查询,是否确认绑定手机号',
  427. success:res=>{
  428. if (res.confirm){
  429. uni.navigateTo({
  430. url: '/myPages/setting/setting-telphone',
  431. })
  432. }
  433. }
  434. })
  435. return
  436. }
  437. let flag = false
  438. this.orderParam.childService.forEach(i=>{
  439. if (!i.serviceStartTime || i.serviceStartTime == ''){
  440. uni.$u.toast('有服务对象没有选择服务时段')
  441. flag=true
  442. return
  443. }
  444. })
  445. if (flag){
  446. return;
  447. }
  448. uni.requestSubscribeMessage({
  449. tmplIds: this.templateId,
  450. success: (res) =>{
  451. let {errMsg,...param} = res
  452. this.$api.updateSubscribe(param).then(res=>{
  453. console.log('+++++++++++++updateSubscribe+++++++++++++',res)
  454. })
  455. },
  456. fail:(err)=>{
  457. console.log('+++++++++++++fail+++++++++++++',err)
  458. },
  459. complete:(complete)=>{
  460. this.commitOrder()
  461. }
  462. })
  463. },
  464. getTemplateList(){
  465. this.$api.getTemplateList({
  466. type:1
  467. }).then(res=>{
  468. this.templateId=res.data.data.data.map(item=>{
  469. return item.priTmplId
  470. })
  471. })
  472. },
  473. improperClose(){
  474. uni.switchTab({
  475. url: '/pages/order/index'
  476. })
  477. },
  478. bindPickerChange(e){
  479. if (e.detail.value == this.periodDateIndex){
  480. return
  481. }
  482. this.periodDateIndex = e.detail.value
  483. this.periodDate = this.periodDateList[e.detail.value]
  484. this.orderParam.serviceDate=this.periodDate.label
  485. //对所有子订单的服务人员及服务时段重新赋值
  486. this.getServicePerson(this.periodDate.label,true)
  487. },
  488. //获取排班日期
  489. selectDate() {
  490. this.$api.selectDate({
  491. organization: this.store.storeId
  492. }).then(res => {
  493. this.periodDate = res.data.data[0]
  494. this.periodDateList = res.data.data
  495. for (const argument of this.periodDateList) {
  496. let month = argument.label.substring(5,6) == 0 ? argument.label.substring(6,7) : argument.label.substring(5,7)
  497. let day = argument.label.substring(8,9) == 0 ? argument.label.substring(9,10) : argument.label.substring(8,10)
  498. argument.name =month + '月' + day +'日'
  499. }
  500. this.orderParam.serviceDate=this.periodDate.label
  501. this.getServicePerson(this.periodDate.label,false)
  502. })
  503. },
  504. // 查询服务工作人员列表
  505. getServicePerson(date,bindPickerChange) {
  506. this.$api.getServicePerson({
  507. storeId:this.store.storeId,
  508. date:date
  509. }).then((res) => {
  510. this.serviceTeacherList = res.data.data;
  511. if (this.serviceTeacherList.length > 0){
  512. this.serviceTeacherList[0].select = true
  513. this.getServicePersonUrl(this.serviceTeacherList);
  514. }
  515. if (bindPickerChange){
  516. if (this.orderParam.childService.length === 0){
  517. // this.selectServiceObject(this.serviceObjectList[0])
  518. }else {
  519. this.serviceObjectList.forEach(i=>{
  520. if (i.select){
  521. this.orderParam.childService=[]
  522. i.select = false
  523. this.selectServiceObject(i)
  524. }
  525. })
  526. }
  527. }else {
  528. this.listServiceObject()
  529. }
  530. })
  531. },
  532. getServicePersonUrl(items){
  533. for (let i = 0; i < items.length; i++) {
  534. if (items[i].facePhoto) {
  535. this.$api.getImgUrlByOssId({
  536. ossId: items[i].facePhoto
  537. }).then(res => {
  538. items[i].facePhotoUrl = res.data.data[0].url.replace(/^http:/, "https:")
  539. this.$set(this.serviceTeacherList, i, items[i])
  540. })
  541. }
  542. }
  543. },
  544. // 查询服务对象信息列表
  545. listServiceObject() {
  546. this.$api.listServiceObject(this.reqParm).then((res) => {
  547. this.serviceObjectList = res.data.data
  548. this.getServiceObjectUrl(this.serviceObjectList);
  549. })
  550. },
  551. // 获取图片
  552. getServiceObjectUrl(items) {
  553. for (let i = 0; i < items.length; i++) {
  554. if (items[i].facePhoto) {
  555. this.$api.getImgUrlByOssId({
  556. ossId: items[i].facePhoto
  557. }).then(res => {
  558. items[i].facePhotoUrl = res.data.data[0].url.replace(/^http:/, "https:")
  559. this.$set(this.serviceObjectList, i, items[i])
  560. })
  561. }
  562. if (i === 0){
  563. // this.selectServiceObject(items[i])
  564. }
  565. }
  566. },
  567. selectServiceObject(item) {
  568. if (!this.serviceTeacherList || this.serviceTeacherList.length==0){
  569. uni.showToast({
  570. icon: 'none',
  571. duration: 2000,
  572. title: '暂无可预约排班'
  573. });
  574. return
  575. }
  576. if (item.select) {
  577. this.orderParam.childService = this.orderParam.childService.filter(selectServiceObject =>
  578. selectServiceObject.serviceObjectId !== item.id)
  579. item.select = !item.select
  580. this.price = 0
  581. for (let childService of this.orderParam.childService) {
  582. this.price = this.price * 1 + childService.fee * 1
  583. this.price = this.price.toFixed(2)
  584. }
  585. } else {
  586. this.$api.getServicePersonTime({
  587. personId: this.serviceTeacherList[0].personId,
  588. date: this.periodDate.label,
  589. storeId:this.store.storeId
  590. }).then(res => {
  591. item.select = !item.select
  592. let selectServiceObjectList = this.orderParam.childService
  593. let periodTimeList = res.data.data
  594. if (!res.data.data || res.data.data.length==0){
  595. //这里只为了断开技师列表的应用关系
  596. let serviceTeacherListStr = JSON.stringify(this.serviceTeacherList)
  597. let serviceTeacherList = JSON.parse(serviceTeacherListStr)
  598. let childService ={
  599. serviceObjectId: item.id,
  600. facePhotoUrl:item.facePhotoUrl, //回显需要,不做参数
  601. nickName:item.nickName, //回显需要,不做参数
  602. serviceUserId: serviceTeacherList[0].personId,
  603. fee:0,//回显需要,不做参数
  604. serviceStartTime: '',
  605. serviceTeacherList:serviceTeacherList,//服务人员列表,回显需要,不做参数
  606. serviceTimeList:periodTimeList//服务时段列表,回显需要,不做参数
  607. }
  608. this.orderParam.childService.push(childService)
  609. this.price = 0
  610. for (let childService of this.orderParam.childService) {
  611. this.price = this.price * 1 + childService.fee * 1
  612. this.price = this.price.toFixed(2)
  613. }
  614. return
  615. }
  616. //选择服务对象时,获取的排班时间为全部技师的排班时间,所以只要某个时段被选过,那么这个时段的数量-1
  617. selectServiceObjectList.forEach(selectServiceObject =>{
  618. periodTimeList.forEach(periodTime =>{
  619. if (selectServiceObject.serviceStartTime == periodTime.label ){
  620. periodTime.total = periodTime.total - 1
  621. }
  622. })
  623. })
  624. let date = null //系统为当前服务对象分配的时间
  625. for (const time of periodTimeList) {
  626. if (time.total>0){
  627. time.select = true
  628. date = time
  629. //为当前服务对象分配时间段成功时,需要将以前的服务对象的可选择的时间段的total -1
  630. selectServiceObjectList.forEach(selectServiceObject =>{
  631. if (selectServiceObject.serviceUserId === -1){
  632. //如果子订单没有指定技师,则对应的时段-1
  633. selectServiceObject.serviceTimeList.forEach(t=>{
  634. if (t.label == date.label){
  635. t.total = t.total -1
  636. }
  637. })
  638. }else {
  639. selectServiceObject.serviceTimeList.forEach(t=>{
  640. //如果子订单指定技师,且该技师的服务时段未被选中,则对应的时段-1
  641. if (t.label == date.label && !t.select){
  642. t.total = t.total -1
  643. }
  644. })
  645. }
  646. })
  647. break
  648. }
  649. }
  650. //这里只为了断开技师列表的应用关系
  651. let serviceTeacherListStr = JSON.stringify(this.serviceTeacherList)
  652. let serviceTeacherList = JSON.parse(serviceTeacherListStr)
  653. //创建子订单项
  654. let childService ={
  655. serviceObjectId: item.id,
  656. facePhotoUrl:item.facePhotoUrl, //回显需要,不做参数
  657. nickName:item.nickName, //回显需要,不做参数
  658. serviceUserId: serviceTeacherList[0].personId,
  659. fee:serviceTeacherList[0].fee,//回显需要,不做参数
  660. serviceStartTime: date.label,
  661. serviceTeacherList:serviceTeacherList,//服务人员列表,回显需要,不做参数
  662. serviceTimeList:periodTimeList//服务时段列表,回显需要,不做参数
  663. }
  664. this.orderParam.childService.push(childService)
  665. this.price = 0
  666. for (let childService of this.orderParam.childService) {
  667. this.price = this.price * 1 + childService.fee * 1
  668. this.price = this.price.toFixed(2)
  669. }
  670. })
  671. }
  672. },
  673. selectServiceTeach(items,index,index1){
  674. items.forEach(e=>{
  675. e.select=false
  676. })
  677. items[index1].select =true
  678. this.orderParam.childService[index].fee = items[index1].fee
  679. this.orderParam.childService[index].serviceUserId = items[index1].personId
  680. this.$api.getServicePersonTime({
  681. personId: items[index1].personId,
  682. date: this.periodDate.label,
  683. storeId:this.store.storeId
  684. }).then(res => {
  685. let serviceTimeList = res.data.data
  686. if (!serviceTimeList || serviceTimeList.length == 0){
  687. this.orderParam.childService[index].serviceStartTime = ''
  688. this.orderParam.childService[index].periodTimeList = []
  689. this.orderParam.childService[index].fee = 0
  690. this.price = 0
  691. for (let childService of this.orderParam.childService) {
  692. this.price = this.price * 1 + childService.fee * 1
  693. this.price = this.price.toFixed(2)
  694. }
  695. this.$forceUpdate()
  696. }else {
  697. let selectServiceObjectList = this.orderParam.childService.filter(selectServiceObject =>
  698. (selectServiceObject.serviceUserId === items[index1].personId
  699. && selectServiceObject.serviceObjectId !== this.orderParam.childService[index].serviceObjectId)
  700. || selectServiceObject.serviceUserId === -1
  701. )
  702. selectServiceObjectList.forEach(selectServiceObject =>{
  703. serviceTimeList.forEach(periodTime =>{
  704. if (selectServiceObject.serviceStartTime === periodTime.label ){
  705. if (selectServiceObject.serviceUserId === -1){
  706. selectServiceObject.serviceTimeList.forEach(t=>{
  707. if (t.label == periodTime.label && t.total === 1){
  708. periodTime.total = periodTime.total - 1
  709. }
  710. })
  711. }else {
  712. periodTime.total = periodTime.total - 1
  713. }
  714. }
  715. })
  716. })
  717. for (const time of serviceTimeList) {
  718. if (time.total>0){
  719. time.select = true
  720. break
  721. }
  722. }
  723. serviceTimeList[0].select = true
  724. this.orderParam.childService[index].serviceStartTime= serviceTimeList[0].label,
  725. this.orderParam.childService[index].serviceTimeList= serviceTimeList
  726. }
  727. })
  728. this.price = 0
  729. for (let childService of this.orderParam.childService) {
  730. this.price = this.price * 1 + childService.fee * 1
  731. this.price = this.price.toFixed(2)
  732. }
  733. this.$forceUpdate()
  734. },
  735. selectServiceTime(items,index,index2){
  736. items.forEach(e=>{
  737. e.select=false
  738. })
  739. items[index2].select =true // 新选中的时间
  740. // let selectServiceObject = this.orderParam.childService[index] //旧的时间
  741. // this.orderParam.childService.forEach(i=>{
  742. // if (selectServiceObject.serviceUserId === -1){
  743. // i.serviceTimeList.forEach(t=>{
  744. // if (t.label == selectServiceObject.serviceStartTime && !t.select ){
  745. // console.log('-1----------加1')
  746. // t.total +=1
  747. // }
  748. // if (t.label == items[index2].serviceStartTime && i.serviceObjectId != selectServiceObject.serviceObjectId){
  749. // console.log('-1----------减1')
  750. // t.total -=1
  751. // }
  752. // })
  753. // }else {
  754. // if (selectServiceObject.serviceUserId == i.serviceUserId){
  755. // i.serviceTimeList.forEach(t=>{
  756. // if (t.label == selectServiceObject.serviceStartTime && !t.select ){
  757. // t.total +=1
  758. // }
  759. // if (t.label == items[index2].serviceStartTime && i.serviceObjectId != selectServiceObject.serviceObjectId){
  760. // t.total -=1
  761. // }
  762. // })
  763. // }
  764. // }
  765. // })
  766. this.orderParam.childService[index].serviceStartTime = items[index2].label
  767. this.$forceUpdate()
  768. },
  769. selectChange() {
  770. this.selectIcon = !this.selectIcon
  771. },
  772. goTermsOfService() {
  773. uni.navigateTo({
  774. url: '/myPages/TermsOfService/index?name=' + '预约需知' + '&type=' + 5
  775. })
  776. },
  777. //支付组件回调
  778. payResult(e){
  779. console.log(e)
  780. if(e.payResult){
  781. uni.showToast({
  782. title: '支付成功!'
  783. });
  784. }else {
  785. uni.showToast({
  786. title: e.res.data.msg,
  787. icon: 'error'
  788. });
  789. }
  790. setTimeout(()=>{
  791. uni.switchTab({
  792. url: '/pages/order/index'
  793. })
  794. },1000)
  795. },
  796. //提交订单
  797. commitOrder() {
  798. if (this.subOrderNo){
  799. this.$refs.myPay.openPopup()
  800. }else {
  801. if (!this.selectIcon) {
  802. uni.$u.toast('请阅读并同意《预约需知》')
  803. return;
  804. }
  805. if (this.orderParam.childService.length === 0) {
  806. uni.$u.toast('请选择服务对象')
  807. return;
  808. }
  809. if (this.requestStatus) {
  810. return;
  811. }
  812. this.requestStatus = true
  813. uni.showLoading({
  814. title: '加载中'
  815. });
  816. this.$api.commonGeneralOrder(this.orderParam).then(res => {
  817. console.log('++++++++++++++++++订单提交+++++++++++', res)
  818. if (res.data.data.subOrderNo) {
  819. uni.hideLoading();
  820. this.subOrderNo = res.data.data.subOrderNo
  821. this.$refs.myPay.openPopup()
  822. } else {
  823. uni.hideLoading();
  824. uni.$u.toast('预约成功')
  825. setTimeout(() => {
  826. uni.switchTab({
  827. url: '/pages/order/index'
  828. })
  829. }, 500)
  830. }
  831. this.requestStatus = false
  832. }).catch(err => {
  833. this.requestStatus = false
  834. })
  835. }
  836. },
  837. getSelectionRules(data){
  838. this.$api.getSelectionRules(data).then(res=>{
  839. this.takeNumberRules = res.data.rows
  840. })
  841. },
  842. }
  843. }
  844. </script>
  845. <style scoped lang="scss">
  846. @import './index.rpx.scss';
  847. .store-wrap {
  848. margin-top: 10rpx;
  849. background-color: white;
  850. .store-info {
  851. display: flex;
  852. .logo {
  853. width: 10%;
  854. text-align: center;
  855. display: flex;
  856. justify-content: center;
  857. align-items: center;
  858. image {
  859. width: 30px;
  860. height: 30px;
  861. }
  862. }
  863. .store-content {
  864. width: 90%;
  865. padding-bottom: 13px;
  866. .h-row {
  867. display: flex;
  868. align-items: center;
  869. justify-content: space-between;
  870. .store-desc {
  871. width: 90%;
  872. display: flex;
  873. line-height: 30px;
  874. font-size: 14px;
  875. .store-name {
  876. }
  877. }
  878. .arrow-right {
  879. text-align: right;
  880. margin: 0 auto;
  881. cursor: pointer;
  882. padding-top: 3px;
  883. width: 100px;
  884. display: flex;
  885. font-size: 14px;
  886. .change-store {
  887. text-align: right;
  888. color: #666;
  889. }
  890. image {
  891. width: 18px;
  892. height: 18px;
  893. }
  894. }
  895. .address {
  896. color: #999999;
  897. width: 450rpx;
  898. font-size: 24rpx;
  899. }
  900. .address1 {
  901. color: #999999;
  902. font-size: 24rpx;
  903. padding-right: 40rpx;
  904. }
  905. }
  906. }
  907. }
  908. .adress {
  909. font-size: 22rpx;
  910. white-space: nowrap;
  911. overflow: hidden;
  912. text-overflow: ellipsis;
  913. padding-left: 80rpx;
  914. color: #666;
  915. }
  916. }
  917. </style>