index.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. <template>
  2. <view :style="{ minHeight: sys.windowHeight + 'px' }"
  3. :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
  4. <tm-menubars title="添加穿搭" :shadow="0" :showback="true"></tm-menubars>
  5. <div class="zhuti">
  6. <!-- 衣橱 -->
  7. <tm-sheet class="yichu" style="margin-bottom: 40px !important;">
  8. <view class="flex-center"><tm-segTabs @change="shifouxuan" :round="24" :margin="[32,10]" font-size="s" :list="list" color="white" activeFontColor="red" bg-color="bg-gradient-red-lighten" v-model="active"></tm-segTabs></view>
  9. <view v-if="yixuanor==1" class="biaoti text-white mt-10 text-size-m"><view class="mr-10"></view>分类</view>
  10. <tm-tabs @change="fenlei" v-if="yixuanor==1" class="C1b1b1b qiehuan" color="white" align="left" v-model="activeIndexfl" :list="listfl" range-key="title"></tm-tabs>
  11. <view class="biaoti text-white mt-30 text-size-m"><view class="mr-10" v-if="yixuanor==0"></view>{{yixuanor==0?'场景':'请选择场景'}}</view>
  12. <tm-tabs @change="changjing" class="C1b1b1b qiehuan" color="white" align="left" v-model="activeIndexcj" :list="listcj" range-key="title"></tm-tabs>
  13. <!-- 可预约 -->
  14. <view v-if="yixuanor==1" class="yiguicla black pa-6 ma-4 fl" @click="gaoliang(index,item)" :class="chooseindex==index?'C0178FD':''" v-for="(item,index) in quanbuList">
  15. <image :src="item.image" mode="widthFix"></image>
  16. <view class="text-size-m mt-20 mb-20 ml-10">{{item.title}}</view>
  17. </view>
  18. <!-- 已预约 -->
  19. <view v-if="yixuanor==0" class="yiguicla black pa-6 ma-4 fl" @click="gaoliang(index,item)" :class="chooseindex==index?'C0178FD':''" v-for="(item,index) in yixuanList">
  20. <image :src="item.image" mode="widthFix"></image>
  21. <view class="text-size-m mt-20 mb-20 ml-10">{{item.title}}</view>
  22. </view>
  23. <tm-empty v-if="yixuanor==0 && yixuanList.length ==0" label="暂无数据" color="white" icon="icon-paperplane-fill"></tm-empty>
  24. <tm-empty v-if="yixuanor==1 && quanbuList.length ==0" label="暂无数据" color="white" icon="icon-paperplane-fill"></tm-empty>
  25. <view style="clear: both;"></view>
  26. <!-- <view style="clear: both;" class="more ma-30 pt-40" @click="gengmore()">
  27. <image src="/static/img/30.png" mode="widthFix"></image>
  28. <text class="text-size-s">下拉加载更多~</text>
  29. </view> -->
  30. </tm-sheet>
  31. <tm-button @click="shanchu" v-if="yixuanor==0 && yixuanList.length !=0" theme="gray" :round="24" class="sao mb-40" block>取消删除</tm-button>
  32. <tm-button @click="yuyue" v-if="yixuanor==1" :round="24" class="sao mb-40" block>预约</tm-button>
  33. </div>
  34. <!-- 弹出层消息 -->
  35. <tm-message ref="toast"></tm-message>
  36. </view>
  37. </template>
  38. <script>
  39. import{myRequest} from '@/api/request.js'
  40. export default {
  41. data() {
  42. return {
  43. listflall:[],
  44. listcjall:[],
  45. listfl:[],
  46. yixuanor:0,//0已选
  47. list:['已预约穿搭','可预约穿搭'],
  48. listcj:[],
  49. active:0,
  50. activeIndexfl:0,
  51. activeIndexcj:0,
  52. quanbuList:[],
  53. yixuanList:[],
  54. chooseindex:-1,
  55. type:1
  56. };
  57. },
  58. onLoad(e) {
  59. this.type=e.type?e.type:1;//1今天2明天
  60. },
  61. created() {
  62. this.sys = uni.getSystemInfoSync();
  63. this.getFl();
  64. this.getCj();
  65. },
  66. methods: {
  67. shanchu(){
  68. var that=this;
  69. if(this.chooseindex==-1){
  70. that.$refs.toast.show({model:'warn',label:'请选择要删除的衣物'})
  71. return
  72. }
  73. var id=this.yixuanList[this.chooseindex].id;
  74. myRequest({
  75. url: "/api/Collocation/deleteTomorrowAppointment",
  76. method:'post',
  77. data:{id:id}
  78. }).then(res => {
  79. if (res.data.code == 200) {
  80. that.$refs.toast.show({model:'success',label:res.data.msg})
  81. that.chooseindex=-1;
  82. that.getCj();
  83. }else{
  84. that.$refs.toast.show({model:'error',label:res.data.msg})
  85. }
  86. })
  87. },
  88. yuyue(){
  89. var that=this;
  90. var scene_id=this.listcjall[this.activeIndexcj].id;
  91. if(this.chooseindex==-1){
  92. that.$refs.toast.show({model:'warn',label:'请选择衣物'})
  93. return
  94. }
  95. var id=this.quanbuList[this.chooseindex].id;
  96. myRequest({
  97. url: "/api/Collocation/makeAppointmentTomorrow",
  98. method:'post',
  99. data:{id:id,scene_id:scene_id}
  100. }).then(res => {
  101. if (res.data.code == 200) {
  102. that.$refs.toast.show({model:'success',label:'预约成功'})
  103. that.chooseindex=-1;
  104. that.getFl();
  105. }else{
  106. that.$refs.toast.show({model:'error',label:res.data.msg})
  107. }
  108. })
  109. },
  110. fenlei(e){
  111. var id=this.listflall[e].id;
  112. this.getKxuan(id)
  113. },
  114. changjing(e){
  115. var id=this.listcjall[e].id;
  116. this.getYxuan(id)
  117. },
  118. shifouxuan(e){
  119. this.activeIndexcj=0;
  120. this.chooseindex=-1;
  121. this.yixuanor=e;
  122. this.activeIndexfl=0;
  123. if(e==0){
  124. var id=this.listcjall[0].id;
  125. this.getYxuan(id)
  126. }else{
  127. var id=this.listflall[0].id;
  128. this.getKxuan(id)
  129. }
  130. },
  131. getYxuan(id){
  132. var that=this;
  133. that.yixuanList=[];
  134. myRequest({
  135. url: "/api/Collocation/getAppointmentMatching",
  136. method:'post',
  137. data:{scene_id:id}
  138. }).then(res => {
  139. if (res.data.code == 200) {
  140. if(res.data.data.length != 0){
  141. that.yixuanList=res.data.data;
  142. }
  143. }else{
  144. that.yixuanList=[];
  145. }
  146. })
  147. },
  148. getKxuan(id){
  149. var that=this;
  150. myRequest({
  151. url: "/api/Collocation/getPlanTomorrow",
  152. method:'post',
  153. data:{id:id}
  154. }).then(res => {
  155. if (res.data.code == 200) {
  156. if(res.data.data.length != 0){
  157. that.quanbuList=res.data.data;
  158. }else{
  159. that.quanbuList=[]
  160. }
  161. }else{
  162. that.quanbuList=[];
  163. }
  164. })
  165. },
  166. getCj(){
  167. var that=this;
  168. myRequest({
  169. url: "/api/Scene/sceneList",
  170. method:'post',
  171. data:{}
  172. }).then(res => {
  173. if (res.data.code == 200) {
  174. if(res.data.data.length != 0){
  175. // that.listfl=['全部'];
  176. that.listcj=[];
  177. for(let i=0;i<res.data.data.length;i++){
  178. that.listcj.push(res.data.data[i].scene_name)
  179. }
  180. that.listcjall=res.data.data;
  181. that.getYxuan(that.listcjall[0].id)
  182. }
  183. }else{
  184. that.listcj=[];
  185. }
  186. })
  187. },
  188. getFl(){
  189. var that=this;
  190. myRequest({
  191. url: "/api/Category/getCollocationClassList",
  192. method:'post',
  193. data:{}
  194. }).then(res => {
  195. if (res.data.code == 200) {
  196. if(res.data.data.length != 0){
  197. // that.listfl=['全部'];
  198. that.listfl=[];
  199. for(let i=0;i<res.data.data.length;i++){
  200. that.listfl.push(res.data.data[i].category_name)
  201. }
  202. that.listflall=res.data.data;
  203. that.getKxuan(that.listflall[0].id);
  204. }
  205. }else{
  206. that.listfl=[];
  207. }
  208. })
  209. },
  210. gengmore(){
  211. },
  212. gaoliang(index){
  213. this.chooseindex=index
  214. }
  215. },
  216. }
  217. </script>
  218. <style lang="scss">
  219. /deep/ .tm-menubars .body{
  220. background-color: #1b1b1b !important;
  221. }
  222. /deep/ .qiehuan1 .text-primary{color: white !important;}
  223. .chuanda{width: 100%;height: 144px;}
  224. .taiyang{width: 25px;}
  225. .bianji{border: 1px solid #303440;width: 80px;height: 30px;background: #303440;font-size: 15px;
  226. text-align: center;line-height: 30px;border-radius: 5px;margin: 0 auto;margin-top: 10px;border:1px solid white;}
  227. .scroll-view_H {
  228. white-space: nowrap;
  229. width: 100%;
  230. background: #1B1B1B;
  231. padding-bottom: 15px;
  232. }
  233. .scroll-view-item {
  234. height: 300rpx;
  235. text-align: center;
  236. font-size: 36rpx;
  237. }
  238. .scroll-view-item_H {
  239. display: inline-block;
  240. width: 150px;
  241. text-align: center;
  242. font-size: 36rpx;
  243. margin-left: 10px;
  244. background: #0D0D0D;
  245. padding: 6px;
  246. border-radius: 10px;
  247. }
  248. .yichu{margin:0 !important;padding: 4px !important;margin-top: 10px !important;}
  249. /deep/ .qiehuan .text-white{
  250. font-size: 14px;
  251. background: #303440;
  252. height: 28px;
  253. vertical-align: middle;
  254. line-height: 28px;
  255. border-radius: 20px;
  256. padding-left: 14px;
  257. padding-right: 14px;
  258. margin-top: 17%;
  259. }
  260. /deep/ .qiehuan .tm-tabs-con-item-border{display: none;}
  261. .yiguicla image{width: 95%;display: block;margin: 0 auto;margin-top: 5px;}
  262. .yiguicla{width: 47%;border-radius: 10px;height: 204px;}
  263. .more{text-align: center;}
  264. .more image{margin-right: 10px;vertical-align: middle;width: 30px;}
  265. .fudong{position:fixed;right:10px;bottom:150px;background: #303030;width: 130px;height: 60px;
  266. border-radius: 30px 0px 0px 30px;font-size: 14px;text-align: center;}
  267. .sao{width: 60%;display: block;margin: 0 auto;margin-bottom: 60px;}
  268. .biaoti view{width:5px;height:19px;background: #0178FD;float: left;border-radius: 10px;}
  269. </style>