index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410
  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 ml-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="item.off==1?'C0178FD':''" v-for="(item,index) in quanbuList" @click="yifu(item,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. <tm-empty v-if="quanbuList.length ==0" label="暂无数据" color="white" icon="icon-paperplane-fill"></tm-empty>
  28. <view style="clear: both;"></view>
  29. <view v-if="quanbuList.length<total" class="more ma-30 pt-40" @click="gengmore()">
  30. <image src="/static/img/30.png" mode="widthFix"></image>
  31. <text class="text-size-s">下拉加载更多~</text>
  32. </view>
  33. </tm-sheet>
  34. <view class="anniu">
  35. <tm-button @click="quxiao1" :round="24" class="fl" theme="gray" size="n">取消</tm-button>
  36. <tm-button :round="24" @click="shanchu" class="fl" theme="red" size="n">删除</tm-button>
  37. <tm-button :round="24" @click="chuku" class="fl" theme="primary" size="n">出库</tm-button>
  38. <tm-button :round="24" @click="baocun" class="fl" theme="primary" size="n">保存</tm-button>
  39. </view>
  40. <tm-poup v-model="show_1" :position="pos" class="tcc">
  41. <view style="position: relative !important;" v-if="chukudata.length !=0">
  42. <view style="height: 10px;"></view>
  43. <tm-swiper @change="qiehuanLb" :current="current" :indicator-dots="false" :round="6" :ani3d="190" :autoplay="false" :list="list1"></tm-swiper>
  44. <view class="text-white text-align-center mt-15">{{chukudata[current].brand}}{{chukudata[current].color}}{{chukudata[current].goods_name}}</view>
  45. <view class="text-white text-align-center mt-10 text-size-s">{{chukudata[current].description}}</view>
  46. <image class="guayi" :src="chukudata[current].ygimage" mode="widthFix"></image>
  47. <view class="text-white text-align-center mt-15">衣物位于 {{chukudata[current].ygposition}} {{chukudata[current].is_have}}号衣柜</view>
  48. <view class="text-white text-align-center mt-15">
  49. <image class="aniOn deng" src="/static/img/101.png" mode="widthFix"></image>
  50. <text style="vertical-align: middle;">指示灯已亮,请取出衣柜</text>
  51. </view>
  52. <view class="anniu">
  53. <tm-button @click="quxiao()" theme="gray" size="n">关闭弹框</tm-button>
  54. <tm-button @click="chuFun()" class="fr" theme="primary" size="n">取消出库</tm-button>
  55. </view>
  56. </view>
  57. </tm-poup>
  58. <!-- 弹出层消息 -->
  59. <tm-message ref="toast"></tm-message>
  60. <tm-dialog v-model="show" :content="content" @confirm="queren"></tm-dialog>
  61. </view>
  62. </view>
  63. </template>
  64. <script>
  65. import{myRequest} from '@/api/request.js'
  66. export default {
  67. data() {
  68. return {
  69. itemuser:0,
  70. soso:'',
  71. activeIndex:0,
  72. list:[],
  73. list1:[],
  74. listlx:[],
  75. quanbuList:[],
  76. chooseindex:-1,
  77. pagesize:6,
  78. page:1,
  79. total:0,
  80. count:0,
  81. have:0,
  82. show:false,
  83. content:'',
  84. show_1:false,
  85. pos:'center',
  86. chukudata:[],
  87. ids:[],
  88. current:0
  89. };
  90. },
  91. onLoad() {
  92. console.log("111")
  93. },
  94. created() {
  95. this.sys = uni.getSystemInfoSync();
  96. console.log("222")
  97. this.getfenltext()
  98. this.fenleichange();
  99. },
  100. methods: {
  101. baocun(){
  102. var that=this;
  103. var arr=[],a=0;
  104. for(let i=0;i<this.quanbuList.length;i++){
  105. if(this.quanbuList[i].off){
  106. a=a+1;
  107. if(this.quanbuList[i].off){
  108. arr.push(this.quanbuList[i])
  109. }
  110. }
  111. }
  112. if(arr.length==0){
  113. that.$refs.toast.show({model:'error',label:'请选择在库衣物'})
  114. return
  115. }
  116. uni.setStorageSync("datalist",arr)
  117. uni.redirectTo({
  118. url: "/pages/baocun/index?type=3",
  119. })
  120. },
  121. shanchu(){
  122. var that=this,id=[];
  123. for(let i=0;i<this.quanbuList.length;i++){
  124. if(this.quanbuList[i].off){
  125. id.push(this.quanbuList[i].id)
  126. }
  127. }
  128. if(id.length==0){
  129. that.$refs.toast.show({model:'error',label:'请选择衣物'})
  130. return
  131. }
  132. myRequest({
  133. url: "/api/Goods/deleteGoods",
  134. method:'post',
  135. data:{ids:id}
  136. }).then(res => {
  137. console.log(res.data)
  138. if (res.data.code == 200) {
  139. that.quanbuList=[];
  140. this.fenleichange();
  141. that.$refs.toast.show({model:'success',label:res.data.msg})
  142. }else{
  143. that.$refs.toast.show({model:'error',label:res.data.msg})
  144. }
  145. })
  146. },
  147. qiehuanLb(e){
  148. var that=this;
  149. this.current=e;
  150. console.log(e)
  151. },
  152. queren(){
  153. var that=this;
  154. this.list1=[]
  155. myRequest({
  156. url: "/api/Goods/takeClothes",
  157. method:'post',
  158. data:{id:that.ids}
  159. }).then(res => {
  160. if (res.data.code == 200) {
  161. that.show_1=true;
  162. that.chukudata=res.data.data;
  163. for(let i=0;i<res.data.data.length;i++){
  164. that.list1.push(res.data.data[i].image)
  165. }
  166. that.$refs.toast.show({model:'success',label:'出库成功'})
  167. }else{
  168. that.$refs.toast.show({model:'error',label:res.data.msg})
  169. }
  170. })
  171. },
  172. quxiao1(){
  173. for(let i=0;i<this.quanbuList.length;i++){
  174. this.quanbuList[i].off=false;
  175. this.$forceUpdate()
  176. }
  177. },
  178. chuku(){
  179. var id=[],a=0;
  180. var that=this;
  181. // if(this.quanbuList.length==0){
  182. // that.$refs.toast.show({model:'error',label:'请选择衣物'})
  183. // return
  184. // }
  185. for(let i=0;i<this.quanbuList.length;i++){
  186. if(this.quanbuList[i].off){
  187. a=a+1;
  188. if(this.quanbuList[i].off && this.quanbuList[i].is_have !=0){
  189. id.push(this.quanbuList[i].id)
  190. }
  191. }
  192. }
  193. if(id.length==0){
  194. that.$refs.toast.show({model:'error',label:'请选择在库衣物'})
  195. return
  196. }
  197. this.content="有"+(a-id.length)+"衣物已经出库,在库衣物将添加至出库清单"
  198. this.ids=id;
  199. this.show=true;
  200. },
  201. sosoFun(){
  202. uni.navigateTo({
  203. url: "/pages/shopsoso/index",
  204. })
  205. },
  206. getfenltext(){
  207. var that=this;
  208. myRequest({
  209. url: "/api/Category/list",
  210. method:'post',
  211. data:{}
  212. }).then(res => {
  213. if (res.data.code == 200) {
  214. if(res.data.data.length != 0){
  215. that.list=['全部'];
  216. for(let i=0;i<res.data.data.length;i++){
  217. that.list.push(res.data.data[i].category_name)
  218. }
  219. that.listlx=res.data.data;
  220. }
  221. }else{
  222. that.list=[];
  223. that.listlx=[];
  224. }
  225. })
  226. },
  227. getList(){
  228. var that=this;
  229. myRequest({
  230. url: "/api/Goods/classificationData",
  231. method:'post',
  232. data:{role_id:that.itemuser.id,id:that.activeIndex,page:that.page,pagesize:that.pagesize}
  233. }).then(res => {
  234. if (res.data.code == 200) {
  235. if(res.data.data.length != 0){
  236. that.quanbuList=that.quanbuList.concat(res.data.data.data);
  237. for(let i=0;i<that.quanbuList.length;i++){
  238. that.quanbuList[i].off=false;
  239. }
  240. that.total=res.data.data.total;
  241. that.count=res.data.data.count;
  242. that.have=res.data.data.have;
  243. }
  244. }else{
  245. that.quanbuList=[];
  246. }
  247. })
  248. },
  249. fenleichangeFun(){
  250. this.page=1;
  251. this.quanbuList=[]
  252. this.getList()
  253. },
  254. fenleichange(){
  255. var that=this;
  256. myRequest({
  257. url: "/api/MemberInfo/getFamilyMember",
  258. method:'post',
  259. data:{family_id:uni.getStorageSync("family_id")}
  260. }).then(res => {
  261. console.log(res.data)
  262. if (res.data.code == 200) {
  263. if(res.data.data.length != 0){
  264. var wu=0;
  265. for(let i=0;i<res.data.data.length;i++){
  266. if(res.data.data[i].checked==1){
  267. wu=1;
  268. that.itemuser=res.data.data[i];
  269. }
  270. }
  271. if(wu==0){
  272. that.itemuser=res.data.data[0];
  273. }
  274. that.getList();
  275. }else{
  276. that.itemuser=0;
  277. }
  278. }else{
  279. that.itemuser=0;
  280. }
  281. })
  282. },
  283. yifu(item,index){
  284. item.off=!item.off;
  285. this.$forceUpdate()
  286. },
  287. qiehuanFun(){
  288. uni.navigateTo({
  289. url: "/pages/qiehuan/index",
  290. })
  291. },
  292. randouh(){
  293. let list2 = [],that=this;
  294. for(let i=0;i<6;i++){
  295. list2.push({
  296. src:'/static/img/47.png',
  297. text:'大号版型夹克',
  298. type:'新品',
  299. off:false
  300. })
  301. }
  302. this.quanbuList=this.quanbuList.concat(list2)
  303. console.log(this.quanbuList)
  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/ .hui{position: absolute;background: rgba(0,0,0,0.4);z-index: 1;top: 0;left: 0;width: 100%;height: 100%;}
  408. </style>