index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351
  1. <template>
  2. <view class="content">
  3. <view class="content-top">
  4. <view class="top-banner">
  5. <u-swiper :list="bannerList" class="banner"></u-swiper>
  6. </view>
  7. </view>
  8. <view class="content-bottom">
  9. <!-- 预约 -->
  10. <u-button :custom-style="yuYueBtn" :hair-line="false" @click="gotoYueYu">一键预约</u-button>
  11. <!-- 接单信息 -->
  12. <view class="bottom-new-notice" v-if="orderStatusText">
  13. <view class="notice-content">
  14. <view class="notice-content-item"><u-icon class="icon" name="home_icon_bells" custom-prefix="custom-icon" size="38" color="#333"></u-icon></span><span class="item-title">最新通知</span></view>
  15. <view class="notice-content-item" v-if="itemOrderStatus=='CONFIRM'">订单<span>{{orderStatusText ? orderStatusText :''}},</span>请耐心等待</view>
  16. <view class="notice-content-item" v-if="itemOrderStatus=='CONFIRM'">{{orderTime ? orderTime :''}}</view>
  17. <view class="notice-content-item" v-if="itemOrderStatus=='FINISH'">订单<span>{{orderStatusText ? orderStatusText :''}},</span>欢迎再次下单</view>
  18. <view class="notice-content-item" v-if="itemOrderStatus=='FINISH'">{{finishTime ? finishTime :''}}</view>
  19. </view>
  20. <view class="notice-static">
  21. <span class="notice-static-text">{{orderStatusText ? orderStatusText :''}}</span>
  22. </view>
  23. </view>
  24. <!-- 回收指引 -->
  25. <view class="bottom-zhiyin" @click="toZY">
  26. <u-image src="/static/houme_bg_guide.png" mode="" height="160"></u-image>
  27. </view>
  28. <!-- 收回统计 -->
  29. <view class="statistics-title">今日上门回收价格</view>
  30. <view class="bottom-statistics">
  31. <view class="statistics-rubbishType">
  32. <view class="statistics-box" v-if="rubbishPaperList.length">
  33. <view class="rubbishType-type"><u-icon class="icon" name="home_icon_paper" custom-prefix="custom-icon" size="36" color="#333"></u-icon><span style="display:in;ine-block; margin-left:10upx">{{rubbishPaperName ? rubbishPaperName :''}}</span></view>
  34. <view v-for="item in rubbishPaperList" class="rubbishType-item">
  35. <span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? ':'+(item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
  36. </view>
  37. </view>
  38. <view class="statistics-box" v-if="rubbishYWList.length">
  39. <view class="rubbishType-type"><u-icon class="icon" name="home_icon_clothing" custom-prefix="custom-icon" size="36" color="#333"></u-icon><span style="display:in;ine-block; margin-left:10upx">{{rubbishYWName ? rubbishYWName :''}}</span></view>
  40. <view v-for="item in rubbishYWList" class="rubbishType-item">
  41. <span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? ':'+(item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
  42. </view>
  43. </view>
  44. </view>
  45. <view class="statistics-rubbishType">
  46. <view class="statistics-box" v-if="rubbishSLList.length">
  47. <view class="rubbishType-type"><u-icon class="icon" name="home_icon_plastic" custom-prefix="custom-icon" size="36" color="#333"></u-icon><span style="display:in;ine-block; margin-left:10upx">{{rubbishSLName ? rubbishSLName :''}}</span></view>
  48. <view v-for="item in rubbishSLList" class="rubbishType-item">
  49. <span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? ':'+(item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
  50. </view>
  51. </view>
  52. <view class="statistics-box" v-if="rubbishJSList.length">
  53. <view class="rubbishType-type"><u-icon class="icon" name="home_icon_metal" custom-prefix="custom-icon" size="36" color="#333"></u-icon><span style="display:in;ine-block; margin-left:10upx">{{rubbishJSName ? rubbishJSName :''}}</span></view>
  54. <view v-for="item in rubbishJSList" class="rubbishType-item">
  55. <span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? ':'+(item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
  56. </view>
  57. </view>
  58. </view>
  59. </view>
  60. <view class="nodata" v-if="rubbishPriceList.length==0">
  61. <u-empty src="/static/def_result.png" :text="noDataText" icon-size="260" ></u-empty>
  62. </view>
  63. </view>
  64. </view>
  65. </template>
  66. <script>
  67. import {getBannerList,geRubbishType,orderStatus} from '@/api/index'
  68. import { checkLogin } from '@/api/login.js'
  69. export default {
  70. components: { },
  71. data() {
  72. return {
  73. yuYueBtn:{
  74. background: "#4F88F7",
  75. borderRadius: "12px",
  76. color:'#fff',
  77. },
  78. hasLogin:false, // 是否登录
  79. noDataText:"", // 未登录提示文字
  80. itemOrderStatus:'', //
  81. orderStatusText:'', // 订单状态
  82. orderTime:'', //
  83. finishTime:'', // 订单完成时间
  84. bannerList:[],
  85. rubbishPaperName:"",
  86. rubbishSLName:"",
  87. rubbishYWName:"",
  88. rubbishJSName:"",
  89. rubbishPaperList:[],
  90. rubbishSLList:[],
  91. rubbishYWList:[],
  92. rubbishJSList:[],
  93. rubbishPriceList:[]
  94. }
  95. },
  96. onLoad() {
  97. this.pageInit()
  98. },
  99. onUnload() {
  100. },
  101. onShareAppMessage(res) {
  102. },
  103. onShareTimeline(res) {
  104. },
  105. onShow() {
  106. checkLogin().then(res => {
  107. this.hasLogin=res.status==200
  108. if(this.hasLogin){
  109. this.pageInit()
  110. }else{
  111. this.noDataText="您尚未登录或登录已过期,完成登录后可查看数据信息!"
  112. }
  113. })
  114. },
  115. methods: {
  116. pageInit() {
  117. this.itemOrderStatus=''
  118. this.orderStatusText=''
  119. this.orderTime=''
  120. this.finishTime=''
  121. this.getBanner()
  122. this.geRubbishTypeList()
  123. this.getOrderStatus()
  124. this.checkUpdate()
  125. },
  126. // 获取banner图
  127. getBanner(){
  128. getBannerList().then(res=>{
  129. if(res.status==200){
  130. this.bannerList=res.data || []
  131. }
  132. console.log(res,'-----banner')
  133. })
  134. },
  135. // 获取订单状态
  136. getOrderStatus(){
  137. orderStatus().then(res=>{
  138. if(res.status==200){
  139. this.itemOrderStatus=res.data.orderStatus
  140. this.orderStatusText=res.data.orderStatusDictValue
  141. this.orderTime=res.data.reserveDateBegin.substring(0,10)+' '+res.data.reserveTimeTypeDictValue
  142. this.finishTime=res.data.finishDate
  143. console.log(res,'----------订单状态')
  144. }
  145. })
  146. },
  147. // 获取垃圾分类
  148. geRubbishTypeList(){
  149. geRubbishType().then(res=>{
  150. if(res.status==200){
  151. console.log(res,'---------垃圾类型')
  152. this.rubbishPriceList=res.data
  153. const a= res.data.find(item=>item.code=='PAPER')
  154. const b= res.data.find(item=>item.code=='PLASTIC')
  155. const c= res.data.find(item=>item.code=='CLOTHES')
  156. const d= res.data.find(item=>item.code=='METAL')
  157. this.rubbishPaperList=a.rubbishTypeVOList
  158. this.rubbishSLList=b.rubbishTypeVOList
  159. this.rubbishYWList=c.rubbishTypeVOList
  160. this.rubbishJSList=d.rubbishTypeVOList
  161. this.rubbishPaperName=a.name
  162. this.rubbishSLName=b.name
  163. this.rubbishYWName=c.name
  164. this.rubbishJSName=d.name
  165. }
  166. })
  167. },
  168. gotoYueYu(){
  169. if(this.hasLogin){
  170. uni.navigateTo({
  171. url: '/pages/index/yuyue'
  172. })
  173. }else{
  174. this.loginModal()
  175. }
  176. },
  177. // 回收指引
  178. toZY(){
  179. uni.navigateTo({
  180. url: '/pages/index/zhiyin'
  181. })
  182. },
  183. // 未登录弹窗
  184. loginModal(){
  185. uni.showModal({
  186. title: '提示',
  187. content: '您尚未登录或登录已过期,请登录后使用',
  188. success: (res)=> {
  189. if (res.confirm) {
  190. uni.navigateTo({
  191. url: '/pages/login/login'
  192. })
  193. } else if (res.cancel) {
  194. console.log('用户点击取消');
  195. }
  196. }
  197. });
  198. },
  199. // 检查更新
  200. checkUpdate(){
  201. if (uni.canIUse('getUpdateManager')) {
  202. const updateManager = uni.getUpdateManager()
  203. updateManager.onCheckForUpdate(function (res) {
  204. console.log('onCheckForUpdate====', res)
  205. // 请求完新版本信息的回调
  206. if (res.hasUpdate) {
  207. console.log('res.hasUpdate====')
  208. updateManager.onUpdateReady(function () {
  209. uni.showModal({
  210. title: '更新提示',
  211. content: '新版本已经准备好,是否重启应用?',
  212. success: function (res) {
  213. console.log('success====', res)
  214. // res: {errMsg: "showModal: ok", cancel: false, confirm: true}
  215. if (res.confirm) {
  216. // 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
  217. updateManager.applyUpdate()
  218. }
  219. }
  220. })
  221. })
  222. updateManager.onUpdateFailed(function () {
  223. // 新的版本下载失败
  224. uni.showModal({
  225. title: '已经有新版本了哟~',
  226. content: '新版本已经上线啦~,请您删除当前小程序,重新搜索打开哟~'
  227. })
  228. })
  229. }
  230. })
  231. }
  232. },
  233. }
  234. }
  235. </script>
  236. <style lang="scss" scoped>
  237. .content {
  238. width: 100%;
  239. height: 100vh;
  240. display: flex;
  241. flex-direction: column;
  242. padding: 0;
  243. .content-top{
  244. width: 100%;
  245. height:260upx ;
  246. background-color: #4F88F7;
  247. border-bottom-left-radius: 50%; /* 左下角 */
  248. border-bottom-right-radius:50%; /* 右下角 */
  249. opacity: 1;
  250. .top-banner{
  251. padding: 20upx 30upx 0;
  252. .banner{
  253. width:100%;
  254. height: 140px;
  255. }
  256. }
  257. }
  258. .content-bottom{
  259. padding: 30upx;
  260. background-color: #f5f5f5;
  261. .bottom-new-notice{
  262. background-image: url('../../static/home_bg_expressage.png');
  263. background-size: 100% 100%;
  264. height:220upx;
  265. margin-top: 30upx;
  266. display: flex;
  267. justify-content: space-between;
  268. align-items: center;
  269. padding: 20upx 30upx;
  270. .notice-content{
  271. .notice-content-item{
  272. margin: 15upx 0;
  273. display: flex;
  274. align-items: center;
  275. .item-title{
  276. display: inline-block;
  277. margin-left: 20upx;
  278. }
  279. }
  280. .notice-content-item:last-child{
  281. font-size: 26upx;
  282. font-family: PingFang SC;
  283. font-weight: 400;
  284. color: #7C7D7E;
  285. }
  286. }
  287. .notice-static{
  288. width:186upx;
  289. height: 108upx;
  290. background-image: url('../../static/home_sign_rider.png');
  291. background-size:100% 100%;
  292. .notice-static-text{
  293. position: relative;
  294. top:21upx;
  295. left:85upx
  296. }
  297. }
  298. }
  299. .bottom-zhiyin{
  300. margin: 30upx 0;
  301. }
  302. .statistics-title{
  303. font-size: 36upx;
  304. font-family: PingFang SC;
  305. font-weight: bold;
  306. color: #191919;
  307. opacity: 1;
  308. margin-bottom: 30upx;
  309. }
  310. .bottom-statistics{
  311. display: flex;
  312. width: 100%;
  313. justify-content: space-between;
  314. .statistics-rubbishType{
  315. width: 48%;
  316. .statistics-box{
  317. margin-bottom:30upx ;
  318. background-color: #fff;
  319. padding: 20upx 10upx 20upx 20upx;
  320. border-radius:16upx;
  321. }
  322. .statistics-box:last-child{
  323. margin-bottom:0 ;
  324. }
  325. }
  326. .rubbishType-type{
  327. display: flex;
  328. align-items: center;
  329. justify-content: flex-start;
  330. font-size: 28upx;
  331. font-family: PingFang SC;
  332. font-weight: 400;
  333. color: #000000;
  334. }
  335. .rubbishType-item{
  336. display: flex;
  337. justify-content: flex-start;
  338. margin:10upx 0 ;
  339. font-size: 26upx;
  340. font-family: PingFang SC;
  341. font-weight: 400;
  342. color: #444444;
  343. }
  344. }
  345. }
  346. }
  347. </style>