index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412
  1. <template>
  2. <view :style="{ minHeight: sys.windowHeight + 'px' }" :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
  3. <tm-menubars title="衣柜" :shadow="0" :showback="true"></tm-menubars>
  4. <view class="C1b1b1b">
  5. <view class="dingwei ml-20" v-if="itemuser!=0">
  6. <image class="touxiang" style="vertical-align: middle;" src="/static/img/41.png" mode="widthFix"></image>
  7. <text style="vertical-align: middle;" class="text-size-m mr-20">{{itemuser.username}}的衣橱</text>
  8. <!-- <image @click="qiehuanFun" style="vertical-align: middle;" src="/static/img/42.png" mode="widthFix"></image> -->
  9. <!-- <text @click="qiehuanFun" style="vertical-align: middle;" class="text-size-m">切换</text> -->
  10. </view>
  11. <view class="dingwei" v-if="itemuser==0">
  12. <text style="vertical-align: middle;" class="text-size-m mr-20">暂无家庭成员去添加</text>
  13. <image @click="tianjia" style="vertical-align: middle;" src="/static/img/42.png" mode="widthFix"></image>
  14. </view>
  15. </view>
  16. <!-- 推荐 -->
  17. <view class="zhuti">
  18. <!-- 衣橱 -->
  19. <tm-sheet class="yichu" style="margin-bottom: 70px !important;">
  20. <tm-tabs class="C1b1b1b qiehuan" @change="fenleichangeFun" color="white" align="left" v-model="activeIndex" :list="list" range-key="title"></tm-tabs>
  21. <view style="position: relative;" class="yiguicla black pa-6 ma-4 fl" :class="itemoff==index?'C0178FD':''" v-for="(item,index) in quanbuList" @click="yifu(index)">
  22. <image :src="item.image" mode="widthFix"></image>
  23. <view class="text-align-center text-size-m mt-8">{{item.brand}}</view>
  24. <view :class="item.is_have==0?'text-gray':''" class="text-align-center text-size-m mt-6 mb-6">{{item.goods_name}}</view>
  25. <view v-if="item.is_have==0" class="hui"></view>
  26. </view>
  27. <view style="clear: both;"></view>
  28. <view v-if="quanbuList.length<total" class="more ma-30 pt-40" @click="gengmore()">
  29. <image src="/static/img/30.png" mode="widthFix"></image>
  30. <text class="text-size-s">下拉加载更多~</text>
  31. </view>
  32. </tm-sheet>
  33. <view class="">
  34. <!-- <tm-button @click="quxiao1" :round="24" class="fl" theme="gray" size="n">取消</tm-button> -->
  35. <!-- <tm-button :round="24" @click="shanchu" class="fl" theme="red" size="n">删除</tm-button> -->
  36. <!-- <tm-button :round="24" @click="chuku" class="fl" theme="primary" size="n">出库</tm-button> -->
  37. <tm-button :round="24" @click="baocun" theme="primary" size="n">确定</tm-button>
  38. </view>
  39. <tm-poup v-model="show_1" :position="pos" class="tcc">
  40. <view style="position: relative !important;" v-if="chukudata.length !=0">
  41. <view style="height: 10px;"></view>
  42. <tm-swiper @change="qiehuanLb" :current="current" :indicator-dots="false" :round="6" :ani3d="190" :autoplay="false" :list="list1"></tm-swiper>
  43. <view class="text-white text-align-center mt-15">{{chukudata[current].brand}}{{chukudata[current].color}}{{chukudata[current].goods_name}}</view>
  44. <view class="text-white text-align-center mt-10 text-size-s">{{chukudata[current].description}}</view>
  45. <image class="guayi" :src="chukudata[current].ygimage" mode="widthFix"></image>
  46. <view class="text-white text-align-center mt-15">衣物位于 {{chukudata[current].ygposition}} {{chukudata[current].is_have}}号衣柜</view>
  47. <view class="text-white text-align-center mt-15">
  48. <image class="aniOn deng" src="/static/img/101.png" mode="widthFix"></image>
  49. <text style="vertical-align: middle;">指示灯已亮,请取出衣柜</text>
  50. </view>
  51. <view class="anniu">
  52. <tm-button @click="quxiao()" theme="gray" size="n">关闭弹框</tm-button>
  53. <tm-button @click="chuFun()" class="fr" theme="primary" size="n">取消出库</tm-button>
  54. </view>
  55. </view>
  56. </tm-poup>
  57. <!-- 弹出层消息 -->
  58. <tm-message ref="toast"></tm-message>
  59. <tm-dialog v-model="show" :content="content" @confirm="queren"></tm-dialog>
  60. </view>
  61. </view>
  62. </template>
  63. <script>
  64. import{myRequest} from '@/api/request.js'
  65. export default {
  66. data() {
  67. return {
  68. itemuser:0,
  69. soso:'',
  70. activeIndex:0,
  71. list:[],
  72. list1:[],
  73. listlx:[],
  74. quanbuList:[],
  75. itemoff:-1,
  76. pagesize:6,
  77. page:1,
  78. total:0,
  79. count:0,
  80. have:0,
  81. show:false,
  82. content:'',
  83. show_1:false,
  84. pos:'center',
  85. chukudata:[],
  86. ids:[],
  87. current:0
  88. };
  89. },
  90. onLoad(e) {
  91. this.goods_id=e.goods_id?e.goods_id:4;//是自己的
  92. this.id=e.id?e.id:4;//是自己的
  93. this.type=e.type?e.type:"tihuan";//是自己的
  94. },
  95. created() {
  96. this.sys = uni.getSystemInfoSync();
  97. this.getfenltext()
  98. this.fenleichange();
  99. },
  100. methods: {
  101. baocun(){
  102. var that=this;
  103. if(this.itemoff==-1){
  104. that.$refs.toast.show({model:'error',label:'请选择衣物'})
  105. return
  106. }
  107. var id=this.quanbuList[this.itemoff].id;
  108. // if(that.id==id){
  109. // uni.navigateBack();
  110. // that.$refs.toast.show({model:'success',label:'修改成功'})
  111. // return
  112. // }
  113. if(this.type=="tihuan"){
  114. var datalist=uni.getStorageSync("datalist");
  115. for(let i=0;i<datalist.length;i++){
  116. if(datalist[i].id==this.id){
  117. datalist[i]=this.quanbuList[this.itemoff];
  118. uni.setStorageSync("datalist",datalist)
  119. let pages = getCurrentPages(); // 当前页面
  120. let beforePage = pages[pages.length - 2]; // 前一个页面
  121. uni.navigateBack({
  122. delta: 1,
  123. success: function() {
  124. beforePage.$vm.huancun()
  125. }
  126. });
  127. }
  128. }
  129. return
  130. }
  131. myRequest({
  132. url: "/api/Collocation/changeClothes",
  133. method:'post',
  134. data:{y_id:that.id,g_id:id}
  135. }).then(res => {
  136. if (res.data.code == 200) {
  137. that.$refs.toast.show({model:'success',label:res.data.msg})
  138. let pages = getCurrentPages(); // 当前页面
  139. let beforePage = pages[pages.length - 2]; // 前一个页面
  140. uni.navigateBack({
  141. delta: 1,
  142. success: function() {
  143. beforePage.$vm.getDate()
  144. }
  145. });
  146. }else{
  147. that.$refs.toast.show({model:'error',label:res.data.msg})
  148. }
  149. })
  150. },
  151. qiehuanLb(e){
  152. var that=this;
  153. this.current=e;
  154. },
  155. queren(){
  156. var that=this;
  157. this.list1=[]
  158. myRequest({
  159. url: "/api/Goods/takeClothes",
  160. method:'post',
  161. data:{id:that.ids}
  162. }).then(res => {
  163. if (res.data.code == 200) {
  164. that.show_1=true;
  165. that.chukudata=res.data.data;
  166. for(let i=0;i<res.data.data.length;i++){
  167. that.list1.push(res.data.data[i].image)
  168. }
  169. that.$refs.toast.show({model:'success',label:'出库成功'})
  170. }else{
  171. that.$refs.toast.show({model:'error',label:res.data.msg})
  172. }
  173. })
  174. },
  175. quxiao1(){
  176. for(let i=0;i<this.quanbuList.length;i++){
  177. this.quanbuList[i].off=false;
  178. this.$forceUpdate()
  179. }
  180. },
  181. chuku(){
  182. var id=[],a=0;
  183. var that=this;
  184. if(this.quanbuList.length==0){
  185. that.$refs.toast.show({model:'error',label:'请选择衣物'})
  186. return
  187. }
  188. for(let i=0;i<this.quanbuList.length;i++){
  189. if(this.quanbuList[i].off){
  190. a=a+1;
  191. if(this.quanbuList[i].off && this.quanbuList[i].is_have !=0){
  192. id.push(this.quanbuList[i].id)
  193. }
  194. }
  195. }
  196. if(id.length==0){
  197. that.$refs.toast.show({model:'error',label:'请选择在库衣物'})
  198. return
  199. }
  200. this.content="有"+(a-id.length)+"衣物已经出库,在库衣物将添加至出库清单"
  201. this.ids=id;
  202. this.show=true;
  203. },
  204. sosoFun(){
  205. uni.navigateTo({
  206. url: "/pages/shopsoso/index",
  207. })
  208. },
  209. getfenltext(){
  210. var that=this;
  211. myRequest({
  212. url: "/api/Category/list",
  213. method:'post',
  214. data:{}
  215. }).then(res => {
  216. if (res.data.code == 200) {
  217. if(res.data.data.length != 0){
  218. that.list=['全部'];
  219. for(let i=0;i<res.data.data.length;i++){
  220. that.list.push(res.data.data[i].category_name)
  221. }
  222. that.listlx=res.data.data;
  223. }
  224. }else{
  225. that.list=[];
  226. that.listlx=[];
  227. }
  228. })
  229. },
  230. getList(){
  231. var that=this;
  232. myRequest({
  233. url: "/api/Goods/classificationData",
  234. method:'post',
  235. data:{role_id:that.itemuser.id,id:that.activeIndex,page:that.page,pagesize:that.pagesize}
  236. }).then(res => {
  237. if (res.data.code == 200) {
  238. if(res.data.data.length != 0){
  239. that.quanbuList=that.quanbuList.concat(res.data.data.data);
  240. for(let i=0;i<that.quanbuList.length;i++){
  241. that.quanbuList[i].off=false;
  242. }
  243. that.total=res.data.data.total;
  244. that.count=res.data.data.count;
  245. that.have=res.data.data.have;
  246. }
  247. }else{
  248. that.quanbuList=[];
  249. }
  250. })
  251. },
  252. fenleichangeFun(){
  253. this.page=1;
  254. this.quanbuList=[]
  255. this.getList()
  256. },
  257. fenleichange(){
  258. var that=this;
  259. myRequest({
  260. url: "/api/MemberInfo/getFamilyMember",
  261. method:'post',
  262. data:{family_id:uni.getStorageSync("family_id")}
  263. }).then(res => {
  264. if (res.data.code == 200) {
  265. if(res.data.data.length != 0){
  266. var wu=0;
  267. for(let i=0;i<res.data.data.length;i++){
  268. if(res.data.data[i].checked==1){
  269. wu=1;
  270. that.itemuser=res.data.data[i];
  271. }
  272. }
  273. if(wu==0){
  274. that.itemuser=res.data.data[0];
  275. }
  276. that.getList();
  277. }else{
  278. that.itemuser=0;
  279. }
  280. }else{
  281. that.itemuser=0;
  282. }
  283. })
  284. },
  285. yifu(index){
  286. this.itemoff=index;
  287. },
  288. qiehuanFun(){
  289. uni.navigateTo({
  290. url: "/pages/qiehuan/index",
  291. })
  292. },
  293. randouh(){
  294. let list2 = [],that=this;
  295. for(let i=0;i<6;i++){
  296. list2.push({
  297. src:'/static/img/47.png',
  298. text:'大号版型夹克',
  299. type:'新品',
  300. off:false
  301. })
  302. }
  303. this.quanbuList=this.quanbuList.concat(list2)
  304. },
  305. ruku(){
  306. uni.navigateTo({
  307. url: "/pages/putstorage/index",
  308. })
  309. },
  310. quxiao(){
  311. this.show_1=false;
  312. },
  313. },
  314. }
  315. </script>
  316. <style lang="scss">
  317. /deep/ uni-scroll-view{
  318. height: auto !important;
  319. }
  320. /deep/ .tm-menubars .body{
  321. background-color: #1b1b1b !important;
  322. }
  323. .shangright{
  324. padding: 10px;
  325. }
  326. //
  327. .xiangji image{
  328. width: 30px;
  329. height: 22px;
  330. }
  331. .suosou image{
  332. width: 40px;
  333. }
  334. /deep/ .icon-search{
  335. font-size: 23px !important;
  336. color: #8E8E93 !important;
  337. }
  338. /deep/ .tm-search{
  339. width: 94%;
  340. margin: 0 auto;
  341. background-color: #414141 !important;
  342. border-radius: 10px;
  343. }
  344. /deep/ .tm-search .grey-darken-5{
  345. background-color: #414141 !important;
  346. }
  347. .dingwei{padding-bottom: 20px;}
  348. .dingwei image{width: 25px;margin-right: 10px; }
  349. .dingwei .touxiang{width: 50px;margin-right: 3px; }
  350. /deep/ .lunbo1{margin:0 !important;padding: 4px !important;margin-top: 5px !important;width: 46.6% !important;}
  351. .tuijiantp{width: 100%;}
  352. .tuijiantp image{width: 97% !important;}
  353. .yichu{margin:0 !important;padding: 4px !important;margin-top: 10px !important;}
  354. /deep/ .qiehuan .text-white{
  355. font-size: 14px;
  356. background: #303440;
  357. height: 28px;
  358. vertical-align: middle;
  359. line-height: 28px;
  360. border-radius: 20px;
  361. padding-left: 14px;
  362. padding-right: 14px;
  363. margin-top: 17%;
  364. }
  365. /deep/ .qiehuan .tm-tabs-con-item-border{display: none;}
  366. .yiguicla image{width: 95%;display: block;margin: 0 auto;margin-top: 5px;}
  367. .yiguicla{width: 30%;border-radius: 10px;}
  368. .more{text-align: center;}
  369. .more image{margin-right: 10px;vertical-align: middle;width: 30px;}
  370. .fudong{position:fixed;right:10px;bottom:150px;background: #303030;width: 130px;height: 60px;
  371. border-radius: 30px 0px 0px 30px;font-size: 14px;text-align: center;}
  372. .fudimg{width: 60px;height:60px}
  373. // .anniu{width: 100%;margin: 0 auto;padding-bottom: 30px;text-align: center;}
  374. // /deep/ .tm-button .tm-button-btn uni-button{min-width: 77px !important;}
  375. /deep/ .tm-button .red{color: white !important;}
  376. /deep/ .tcc .tm-poup-wk{width: 90% !important;position:relative;height: 580px !important;}
  377. /deep/ .tcc .uni-swiper-slides{width: 100%;}
  378. /deep/ .tcc uni-swiper{width: 100% !important;}
  379. /deep/ .uni-swiper-slides{width: 160px !important;}
  380. /deep/ .tcc uni-image{width: 160px !important;}
  381. .tcc .guayi{width: 70% !important;display: block;margin:0 auto;margin-top:15px !important;}
  382. .tcc .deng{width:25px !important;height:25px !important;vertical-align: middle;margin-right:8px;}
  383. .aniOn{
  384. animation:doudong 0.5s linear infinite;
  385. background:linear-gradient();
  386. background: -webkit-linear-gradient();
  387. }
  388. @keyframes doudong {
  389. 0%{
  390. transform: rotate(-2deg) translateX(2rpx) translateY(2rpx);
  391. }
  392. 25%{
  393. transform: rotate(0deg) translateX(-2rpx) translateY(-2rpx);
  394. }
  395. 50%{
  396. transform: rotate(0deg) translateX(0rpx) translateY(-2rpx);
  397. }
  398. 75%{
  399. transform: rotate(0deg) translateX(0rpx) translateY(2rpx);
  400. }
  401. 100%{
  402. transform: rotate(-2deg) translateX(2rpx) translateY(2rpx);
  403. }
  404. }
  405. /deep/ .tcc .anniu .gray.bk{color: white !important;}
  406. // .tcc .anniu{width: 88%;margin: 0 auto;margin-top: 20px;}
  407. /deep/ .tm-button{width: 80%;margin: 0 auto;margin-top: 20px;display: block;}
  408. /deep/ .tm-button-btn{width: 100% !important;}
  409. /deep/ .hui{position: absolute;background: rgba(0,0,0,0.4);z-index: 1;top: 0;left: 0;width: 100%;height: 100%;}
  410. </style>