index.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337
  1. <template>
  2. <view :style="{ minHeight: sys.windowHeight + 'px' }"
  3. :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
  4. <tm-menubars title="搭配" :shadow="0" :showback="false"></tm-menubars>
  5. <view class="C1b1b1b pb-20">
  6. <tm-tabs align="left" class="qiehuan1" v-model="activeIndex" :list="list" range-key="title"></tm-tabs>
  7. </view>
  8. <!-- 天气 -->
  9. <scroll-view class="scroll-view_H" scroll-x="true">
  10. <view class="scroll-view-item_H" v-if="alltouList.length !=0">
  11. <image v-if="alltouList[0].data !=0" class="chuanda" :src="alltouList[0].data.makeAppointmentCollocation.image"></image>
  12. <view v-else class="chuanda">
  13. <view class="text-white text-size-lg">{{tianqiList.city}}市</view>
  14. <view class="text-size-lg mt-15 text-weight-b" style="color: #FFCC00;">{{tianqiList.temp}}°C</view>
  15. <view class="text-white text-size-lg mt-15">{{tianqiList.weather}}</view>
  16. <view class="text-gray text-size-lg mt-10">最低{{tianqiList.templow}}°c 最高{{tianqiList.temphigh}}°c</view>
  17. </view>
  18. <view class="mt-20 text-align-center">
  19. <image class="taiyang" src="/static/img/106.png" mode="widthFix"></image>
  20. <text class="text-size-s ml-15">{{tianqiList.templow}}°c~{{tianqiList.temphigh}}°c</text>
  21. <text class="text-size-s ml-15">{{tianqiList.week}}</text>
  22. </view>
  23. <view class="bianji" @click="bianji(1,alltouList[0].data)">{{alltouList[0].data !=0?'更换穿搭':'添加穿搭'}}</view>
  24. </view>
  25. <view class="scroll-view-item_H" v-if="alltouList.length !=0">
  26. <image v-if="alltouList[1].data !=0" class="chuanda" :src="alltouList[1].data.makeAppointmentCollocation.image"></image>
  27. <view v-else class="chuanda">
  28. <view class="text-white text-size-lg">{{tianqiList.city}}市</view>
  29. <view class="text-size-lg mt-15 text-weight-b" style="color: #FFCC00;">{{tianqiList.daily[1].day.temphigh}}°C</view>
  30. <view class="text-white text-size-lg mt-15">{{tianqiList.daily[1].day.weather}}</view>
  31. <view class="text-gray text-size-lg mt-10">{{tianqiList.daily[1].day.winddirect}} {{tianqiList.daily[1].day.windpower}}°c</view>
  32. </view>
  33. <view class="mt-20 text-align-center">
  34. <image class="taiyang" src="/static/img/106.png" mode="widthFix"></image>
  35. <text class="text-size-s ml-15">最高温度{{tianqiList.daily[1].day.temphigh}}°C</text>
  36. <text class="text-size-s ml-15">{{tianqiList.daily[1].week}}</text>
  37. </view>
  38. <view v-if="alltouList[1].data !=0" class="bianji" @click="bianji(2,alltouList[1].data)">{{alltouList[1].data !=0?'更换穿搭':'添加穿搭'}}</view>
  39. </view>
  40. <!-- <view class="scroll-view-item_H">
  41. <view class="mt-20 text-align-center">
  42. <image class="taiyang" src="/static/img/106.png" mode="widthFix"></image>
  43. <text class="text-size-s ml-15">16°c~20°c</text>
  44. <text class="text-size-s ml-15">星期一</text>
  45. </view>
  46. <view class="bianji" @click="bianji(2)">添加穿搭</view>
  47. </view> -->
  48. <!-- <view class="scroll-view-item_H">
  49. <image class="chuanda" src="/static/img/107.png" mode="widthFix"></image>
  50. <view class="mt-20 text-align-center">
  51. <image class="taiyang" src="/static/img/106.png" mode="widthFix"></image>
  52. <text class="text-size-s ml-15">16°c~20°c</text>
  53. <text class="text-size-s ml-15">星期一</text>
  54. </view>
  55. <view class="bianji" @click="bianji()">编辑穿搭</view>
  56. </view> -->
  57. </scroll-view>
  58. <div class="zhuti">
  59. <!-- 衣橱 1-->
  60. <tm-sheet class="yichu" style="margin-bottom: 40px !important;">
  61. <tm-tabs @change="fenlei" class="C1b1b1b qiehuan" color="white" align="left" v-model="activeIndex1" :list="listfl" range-key="title"></tm-tabs>
  62. <view class="yiguicla black pa-6 ma-4 fl" v-for="(item,index) in quanbuList" @click="zidingyibianji(item)">
  63. <image :src="item.image" mode="widthFix"></image>
  64. <view class="text-size-m mt-20 mb-20 ml-10">{{item.title}}</view>
  65. </view>
  66. <view style="clear: both;"></view>
  67. <tm-empty v-if="quanbuList.length ==0" label="暂无数据" color="white" icon="icon-paperplane-fill"></tm-empty>
  68. <!-- <view style="clear: both;" class="more ma-30 pt-40" @click="gengmore()">
  69. <image src="/static/img/30.png" mode="widthFix"></image>
  70. <text class="text-size-s">下拉加载更多~</text>
  71. </view> -->
  72. </tm-sheet>
  73. <tm-button :round="24" class="sao" block @click="zidingyi()">自定义搭配</tm-button>
  74. </div>
  75. <!-- 弹出层消息 -->
  76. <tm-message ref="toast"></tm-message>
  77. </view>
  78. </template>
  79. <script>
  80. import{myRequest} from '@/api/request.js'
  81. export default {
  82. data() {
  83. return {
  84. list:[ '预约穿搭'],
  85. activeIndex:0,
  86. activeIndex1:0,
  87. quanbuList:[],
  88. chooseindex:-1,
  89. listfl:[],
  90. listflall:[],
  91. alltouList:[],
  92. tianqiList:[],
  93. page:1,
  94. pageSize:3
  95. };
  96. },
  97. onLoad(e) {
  98. },
  99. onShow(){
  100. },
  101. created() {
  102. this.sys = uni.getSystemInfoSync();
  103. this.gettianqi();
  104. this.getFl();
  105. this.touFun();
  106. },
  107. methods: {
  108. shuaxin(){
  109. this.activeIndex1=0;
  110. this.page=1;
  111. this.getFl();
  112. },
  113. fenlei(e){
  114. var id=this.listflall[e].id;
  115. this.getKxuan(id)
  116. },
  117. touFun(){
  118. var that=this;
  119. // 11
  120. myRequest({
  121. url: "/api/Collocation/selectStyle",
  122. method:'post',
  123. data:{}
  124. }).then(res => {
  125. if (res.data.code == 200) {
  126. var dataList=res.data.data;
  127. if(dataList.length==0){
  128. that.alltouList[0]={data:0}
  129. that.alltouList[1]={data:0}
  130. }else if(dataList.length==1){
  131. for(let i=0;i<dataList.length;i++){
  132. if(dataList[i].type==1){
  133. that.alltouList[0]={data:dataList[i]}
  134. }else{
  135. that.alltouList[0]={data:0}
  136. }
  137. if(dataList[i].type==2){
  138. that.alltouList[1]={data:dataList[i]}
  139. }else{
  140. that.alltouList[1]={data:0}
  141. }
  142. }
  143. }else{
  144. for(let i=0;i<dataList.length;i++){
  145. if(dataList[i].type==1){
  146. that.alltouList[0]={data:dataList[i]}
  147. }
  148. if(dataList[i].type==2){
  149. that.alltouList[1]={data:dataList[i]}
  150. }
  151. }
  152. }
  153. console.log(that.alltouList)
  154. }else{
  155. that.alltouList[0]={data:0}
  156. that.alltouList[1]={data:0}
  157. }
  158. })
  159. },
  160. getFl(){
  161. var that=this;
  162. myRequest({
  163. url: "/api/Category/getCollocationClassList",
  164. method:'post',
  165. data:{}
  166. }).then(res => {
  167. if (res.data.code == 200) {
  168. if(res.data.data.length != 0){
  169. // that.listfl=['全部'];
  170. that.listfl=[];
  171. for(let i=0;i<res.data.data.length;i++){
  172. that.listfl.push(res.data.data[i].category_name)
  173. }
  174. that.listflall=res.data.data;
  175. that.getKxuan(that.listflall[0].id);
  176. }
  177. }else{
  178. that.listfl=[];
  179. }
  180. })
  181. },
  182. getKxuan(id){
  183. var that=this;
  184. myRequest({
  185. url: "/api/Collocation/getCollocationList",
  186. method:'post',
  187. data:{category_id:id,page:that.page,pageSize:that.pageSize}
  188. }).then(res => {
  189. if (res.data.code == 200) {
  190. if(res.data.data.length != 0){
  191. that.quanbuList=res.data.data.data;
  192. }else{
  193. that.quanbuList=[];
  194. }
  195. }else{
  196. that.quanbuList=[];
  197. }
  198. })
  199. },
  200. gettianqi(){
  201. var that=this;
  202. // uni.getLocation({
  203. // type: 'wgs84',
  204. // geocode:true,//设置该参数为true可直接获取经纬度及城市信息
  205. // success: function (res) {
  206. // console.log(res)
  207. // // that.addrDel = res;
  208. // },
  209. // fail: function () {
  210. // uni.showToast({
  211. // title: '获取地址失败,将导致部分功能不可用',
  212. // icon:'none'
  213. // });
  214. // }
  215. // });
  216. uni.request({
  217. url: "https://jisutqybmf.market.alicloudapi.com/weather/query",
  218. method: "get",
  219. header: {
  220. 'Authorization':'APPCODE b838ad36bbd741ad97bbe22e50be1847'
  221. },
  222. data:{
  223. city:'南京'
  224. },
  225. dataType:'json',
  226. success : function(data) {
  227. that.tianqiList=data.data.result;
  228. },
  229. error : function(e) {
  230. alert("网络异常,请重试");
  231. }
  232. });
  233. },
  234. bianji(type,data){
  235. console.log(type)
  236. console.log(data)
  237. if(data.makeAppointmentCollocation){
  238. uni.navigateTo({
  239. url: "/pages/bianjigh/index?type="+type+'&id='+data.id+"&old="+data.collocation_id,
  240. })
  241. }else{
  242. uni.navigateTo({
  243. url: "/pages/bianjigh/index?type="+type,
  244. })
  245. }
  246. },
  247. zidingyibianji(item){
  248. if(item.type==2){
  249. // 衣橱
  250. uni.navigateTo({
  251. url: "/pages/baocun/index?id="+item.id+"&type=2",
  252. })
  253. }else{
  254. // 大数据推荐1
  255. uni.navigateTo({
  256. url: "/pages/zidingyikan/index?id="+item.id+"&type=2",
  257. })
  258. }
  259. // uni.navigateTo({
  260. // url: "/pages/zidingyi/index?type=1",
  261. // })
  262. },
  263. dapei(){
  264. uni.navigateTo({
  265. url: "/pages/dapeizidingyi/index?type=1",
  266. })
  267. },
  268. gengmore(){
  269. },
  270. zidingyi(){
  271. uni.navigateTo({
  272. url: "/pages/changan/index",
  273. })
  274. }
  275. },
  276. }
  277. </script>
  278. <style lang="scss">
  279. /deep/ .tm-menubars .body{
  280. background-color: #1b1b1b !important;
  281. }
  282. /deep/ .qiehuan1 .text-primary{color: white !important;}
  283. .chuanda{width: 100%;height: 144px;}
  284. .taiyang{width: 25px;}
  285. .bianji{border: 1px solid #303440;width: 80px;height: 30px;background: #303440;font-size: 15px;
  286. text-align: center;line-height: 30px;border-radius: 5px;margin: 0 auto;margin-top: 10px;border:1px solid white;}
  287. .scroll-view_H {
  288. white-space: nowrap;
  289. width: 100%;
  290. background: #1B1B1B;
  291. padding-bottom: 15px;
  292. }
  293. .scroll-view-item {
  294. height: 300rpx;
  295. text-align: center;
  296. font-size: 36rpx;
  297. }
  298. .scroll-view-item_H {
  299. display: inline-block;
  300. width: 150px;
  301. text-align: center;
  302. font-size: 36rpx;
  303. margin-left: 10px;
  304. background: #0D0D0D;
  305. padding: 6px;
  306. border-radius: 10px;
  307. }
  308. .yichu{margin:0 !important;padding: 4px !important;margin-top: 10px !important;}
  309. /deep/ .qiehuan .text-white{
  310. font-size: 14px;
  311. background: #303440;
  312. height: 28px;
  313. vertical-align: middle;
  314. line-height: 28px;
  315. border-radius: 20px;
  316. padding-left: 14px;
  317. padding-right: 14px;
  318. margin-top: 17%;
  319. }
  320. /deep/ .qiehuan .tm-tabs-con-item-border{display: none;}
  321. .yiguicla image{width: 95%;display: block;margin: 0 auto;margin-top: 5px;}
  322. .yiguicla{width: 47%;border-radius: 10px;}
  323. .more{text-align: center;}
  324. .more image{margin-right: 10px;vertical-align: middle;width: 30px;}
  325. .fudong{position:fixed;right:10px;bottom:150px;background: #303030;width: 130px;height: 60px;
  326. border-radius: 30px 0px 0px 30px;font-size: 14px;text-align: center;}
  327. .sao{width: 60%;display: block;margin: 0 auto;margin-bottom: 60px;}
  328. /deep/ .scroll-view_H{height:245px !important;}
  329. </style>