YY.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443
  1. <template>
  2. <view class="content-yy">
  3. <!-- <uni-nav-bar left-icon="back" title="下单" class="nav-bar"></uni-nav-bar> -->
  4. <view class="content-nav">
  5. <!-- <view>
  6. <u-icon name="arrow-left" color="#fff" size="34"></u-icon>
  7. <text style="color: #fff;">下单</text>
  8. </view> -->
  9. <u-image src="/static/index/bg_order.png" width="100%" height="396" class="nav-image"></u-image>
  10. </view>
  11. <!-- <scroll-view :scroll-y="true" style="height:100%;"> -->
  12. <view class="content-body">
  13. <view class="store-image flex flex_column justify_center">
  14. <u-image src="/static/index/def_home_shop.png" width="172" height="172" ></u-image>
  15. <text>骑手张三的店铺</text>
  16. </view>
  17. <!-- 表单 -->
  18. <view class="list-container">
  19. <view class="list-item">
  20. <view class="list-item-left phone">
  21. <text>联系电话</text>
  22. </view>
  23. <view class="list-item-right flex_1">
  24. <u-input class="flex_1" :custom-style="inputClass" v-model="form.contactMobile" placeholder="请输入车牌号码" placeholder-style="color:'#bbb';font-size:18px"/>
  25. </view>
  26. </view>
  27. <view class="list-item">
  28. <view class="list-item-left">
  29. <text>通信地址</text>
  30. </view>
  31. <view class="list-item-right flex_1">
  32. <u-input class="flex_1" :custom-style="inputClass" v-model="form.contactAddress" @click="selectAddress" :disabled="true" placeholder="请选择通信地址" placeholder-style="color:'#bbb';font-size:18px"/>
  33. <u-icon class="back-img" name="arrow-right" color="#9DA8B5" @click="selectAddress"></u-icon>
  34. </view>
  35. </view>
  36. <view class="list-item">
  37. <view class="list-item-left">
  38. <text>详细地址</text>
  39. </view>
  40. <view class="list-item-right flex_1">
  41. <u-input class="flex_1" :custom-style="inputClass" v-model="form.houseAddress" placeholder="街道,楼牌号等" placeholder-style="color:'#bbb';font-size:18px"/>
  42. </view>
  43. </view>
  44. </view>
  45. <!-- 一键预约 -->
  46. <u-button :custom-style="yuYueBtn" :hair-line="false" @click="submit">一键预约</u-button>
  47. <!-- 今日上门回收价格 -->
  48. <view class="statistics-title">今日上门回收价格</view>
  49. <view>
  50. <!-- 纸张类 -->
  51. <view class="statistics-box" v-if="rubbishPaperList.length">
  52. <view class="rubbishType-type">
  53. {{rubbishPaperName ? rubbishPaperName :''}}
  54. </view>
  55. <view class="flex rubbish">
  56. <view v-for="item in rubbishPaperList" class="rubbishType-item">
  57. <u-image :src="item.image" width="92" height="92"></u-image>
  58. <span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? (item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
  59. </view>
  60. </view>
  61. </view>
  62. <!-- 塑料类 -->
  63. <view class="statistics-box" v-if="rubbishSLList.length">
  64. <view class="rubbishType-type">
  65. {{rubbishSLName ? rubbishSLName :''}}
  66. </view>
  67. <view class="flex rubbish">
  68. <view v-for="item in rubbishSLList" class="rubbishType-item">
  69. <u-image :src="item.image" width="92" height="92"></u-image>
  70. <span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? (item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
  71. </view>
  72. </view>
  73. </view>
  74. <!-- 金属类 -->
  75. <view class="statistics-box" v-if="rubbishJSList.length">
  76. <view class="rubbishType-type">
  77. {{rubbishJSName ? rubbishJSName :''}}
  78. </view>
  79. <view class="flex rubbish">
  80. <view v-for="item in rubbishJSList" class="rubbishType-item">
  81. <u-image :src="item.image" width="92" height="92"></u-image>
  82. <span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? (item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
  83. </view>
  84. </view>
  85. </view>
  86. <!-- 衣物类 -->
  87. <view class="statistics-box" v-if="rubbishYWList.length">
  88. <view class="rubbishType-type">
  89. {{rubbishYWName ? rubbishYWName :''}}
  90. </view>
  91. <view class="flex rubbish">
  92. <view v-for="item in rubbishYWList" class="rubbishType-item">
  93. <u-image :src="item.image" width="92" height="92"></u-image>
  94. <span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? (item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
  95. </view>
  96. </view>
  97. </view>
  98. <view class="nodata" v-if="rubbishPriceList.length==0">
  99. <u-empty src="/static/def_result.png" :text="noDataText" icon-size="260" ></u-empty>
  100. </view>
  101. </view>
  102. </view>
  103. <!-- </scroll-view> -->
  104. </view>
  105. </template>
  106. <script>
  107. import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
  108. import {geRubbishType} from '@/api/index'
  109. import {userInfoSave} from '@/api/data.js'
  110. export default{
  111. components: {uniNavBar},
  112. data(){
  113. return{
  114. yuYueBtn:{
  115. background: "#1995FF",
  116. borderRadius: "8px",
  117. color:'#fff',
  118. },
  119. rubbishPaperName:"",
  120. rubbishSLName:"",
  121. rubbishYWName:"",
  122. rubbishJSName:"",
  123. rubbishPaperList:[],
  124. rubbishSLList:[],
  125. rubbishYWList:[],
  126. rubbishJSList:[],
  127. rubbishPriceList:[],
  128. form: {
  129. contactMobile: '', //联系人手机
  130. contactAddress:'' ,// 通讯地址
  131. lat:'', // 通讯地址的经度
  132. lng:'', // 通讯地址的纬度
  133. houseAddress:'', // 详细地址
  134. },
  135. area:{}
  136. }
  137. },
  138. methods:{
  139. pageInit() {
  140. this.geRubbishTypeList()
  141. this.checkUpdate()
  142. },
  143. //截取省市区
  144. getArea(str) {
  145. // let area = {}
  146. let index11 = 0
  147. let index1 = str.indexOf("省")
  148. if (index1 == -1) {
  149. index11 = str.indexOf("自治区")
  150. if (index11 != -1) {
  151. this.area.Province = str.substring(0, index11 + 3)
  152. } else {
  153. this.area.Province = str.substring(0, 0)
  154. }
  155. } else {
  156. this.area.Province = str.substring(0, index1 + 1)
  157. }
  158. let index2 = str.indexOf("市")
  159. if (index11 == -1) {
  160. this.area.City = str.substring(index11 + 1, index2 + 1)
  161. } else {
  162. if (index11 == 0) {
  163. this.area.City = str.substring(index1 + 1, index2 + 1)
  164. } else {
  165. this.area.City = str.substring(index11 + 3, index2 + 1)
  166. }
  167. }
  168. let index3 = str.lastIndexOf("区")
  169. if (index3 == -1) {
  170. index3 = str.indexOf("县")
  171. this.area.Country = str.substring(index2 + 1, index3 + 1)
  172. } else {
  173. this.area.Country = str.substring(index2 + 1, index3 + 1)
  174. }
  175. // return this.area;
  176. if(this.area.Province==''){
  177. this.area.Province=this.area.City
  178. }
  179. console.log(this.area,'---------------省市区')
  180. },
  181. // 选择通信地址
  182. selectAddress(){
  183. wx.chooseLocation({
  184. success:(res)=>{
  185. if(res){
  186. this.getArea(res.address)
  187. console.log(res,'------------------地址信息',this.getArea(res.address))
  188. // this.form.contactAddress=res.address
  189. this.form.lat=res.latitude
  190. this.form.lng=res.longitude
  191. this.form.contactAddress=this.area.Province+this.area.City+this.area.Country
  192. }
  193. }
  194. })
  195. },
  196. // 获取垃圾分类
  197. geRubbishTypeList(){
  198. geRubbishType().then(res=>{
  199. if(res.status==200){
  200. console.log(res,'---------垃圾类型')
  201. this.rubbishPriceList=res.data
  202. const a= res.data.find(item=>item.code=='PAPER')
  203. const b= res.data.find(item=>item.code=='PLASTIC')
  204. const c= res.data.find(item=>item.code=='CLOTHES')
  205. const d= res.data.find(item=>item.code=='METAL')
  206. /* 纸张类 */
  207. this.rubbishPaperList=a.rubbishTypeVOList
  208. this.rubbishPaperList.map(item=>{
  209. if(item.code=='YELLOW_PAPER'){
  210. item.image='/static/index/icon_aper_yellow.png'
  211. }
  212. if(item.code=='COLOUR_PAPER'){
  213. item.image='/static/index/icon_aper_flower.png'
  214. }
  215. if(item.code=='BOOK_PAPER'){
  216. item.image='/static/index/icon_book.png'
  217. }
  218. if(item.code=='MAGAZINE'){
  219. item.image='/static/index/icon_magazine.png'
  220. }
  221. if(item.code=='OTHER_PAPER'){
  222. item.image='/static/index/icon_aper_miscellaneous.png'
  223. }
  224. if(item.code=='NEWS_PAPER'){
  225. item.image='/static/index/icon_newspaper.png'
  226. }
  227. })
  228. // 塑料类
  229. this.rubbishSLList=b.rubbishTypeVOList
  230. this.rubbishSLList.map(item=>{
  231. if(item.code=='PLASTIC_WHITE'){
  232. item.image='/static/index/icon_frame_white.png'
  233. }
  234. if(item.code=='PLASTIC_BLACK'){
  235. item.image='/static/index/icon_frame_black.png'
  236. }
  237. if(item.code=='PMMA'){
  238. item.image='/static/index/icon_acrylic.png'
  239. }
  240. if(item.code=='PLASTIC_LUCENCY'){
  241. item.image='/static/index/icon_bottle.png'
  242. }
  243. })
  244. // 衣物
  245. this.rubbishYWList=c.rubbishTypeVOList
  246. this.rubbishYWList.map(item=>{
  247. if(item.code=='SIMPLE_CLOTHES'){
  248. item.image='/static/index/icon_clothes.png'
  249. }
  250. })
  251. // 金属
  252. this.rubbishJSList=d.rubbishTypeVOList
  253. this.rubbishJSList.map(item=>{
  254. if(item.code=='THIN_IRON'){
  255. item.image='/static/index/icon_iron_thin.png'
  256. }
  257. if(item.code=='THICK_IRON'){
  258. item.image='/static/index/icon_iron_thick.png'
  259. }
  260. if(item.code=='STAINLESS_IRON'){
  261. item.image='/static/index/icon_steel.png'
  262. }
  263. })
  264. this.rubbishPaperName=a.name
  265. this.rubbishSLName=b.name
  266. this.rubbishYWName=c.name
  267. this.rubbishJSName=d.name
  268. }
  269. })
  270. },
  271. // 预约
  272. submit(){
  273. uni.navigateTo({
  274. url:'/pages/index/yuyueResult'
  275. })
  276. // const testVal=/^1[34578]\d{9}$/
  277. // if (!testVal.test(this.form.contactMobile)) {
  278. // uni.showToast({
  279. // title: '请输入正确的联系电话',
  280. // icon: 'none'
  281. // })
  282. // return false
  283. // }
  284. // const params=Object.assign(this.form,{lat:this.form.lat,lng:this.form.lng})
  285. // userInfoSave(params).then(res=>{
  286. // if(res.status==200){
  287. // uni.$emit('pageType', {data: 'userInfo' })
  288. // setTimeout(()=>{
  289. // uni.navigateBack({
  290. // })
  291. // },300)
  292. // }
  293. // })
  294. },
  295. },
  296. onLaunch(){
  297. },
  298. onLoad() {
  299. this.pageInit()
  300. },
  301. }
  302. </script>
  303. <style lang="scss">
  304. .content-yy{
  305. width: 100%;
  306. height: 100vh;
  307. display: flex;
  308. flex-direction: column;
  309. .content-nav{
  310. width: 750upx;
  311. height: 396upx ;
  312. position: fixed;
  313. top:-120upx;
  314. left: 0;
  315. background: #1995FF;
  316. .nav-image{
  317. display: flex;
  318. z-index: 100;
  319. }
  320. }
  321. .content-body{
  322. width: 750upx;
  323. height: 100vh;
  324. padding: 0 26upx 30upx;
  325. flex:1;
  326. overflow-y: scroll;
  327. background: #f5f5f5;
  328. border-radius: 24px 24px 0px 0px;
  329. position: absolute;
  330. top:220upx;
  331. // padding-top: 270upx;
  332. left: 0;
  333. .store-image{
  334. // display:table-cell;
  335. padding:60upx 0;
  336. text-align: center;
  337. }
  338. .list-container{
  339. width: 100%;
  340. background: #FFFFFF;
  341. border-radius: 24upx;
  342. margin-bottom: 40upx;
  343. box-sizing:border-box;
  344. .border-bottom{
  345. padding-left: 32rpx;
  346. border-bottom: 1px solid #E5E5E5;
  347. }
  348. .margin-bot{
  349. margin-bottom: 20rpx;
  350. }
  351. .list-item{
  352. // width: 100%;
  353. background-color: #fff;
  354. // display: flex;
  355. margin: 0 32upx;
  356. padding: 30rpx 0;
  357. // justify-content: space-between;
  358. // align-items:center;
  359. border-bottom: 1px solid #E5E5E5;
  360. .user-photo{
  361. display: block;
  362. width: 100rpx;
  363. height: 100rpx;
  364. border-radius: 50%;
  365. overflow: hidden;
  366. }
  367. .list-item-left{
  368. font-size: 30upx;
  369. margin-bottom: 10upx;
  370. color: #666E75;
  371. }
  372. .phone:after {
  373. content: '*';
  374. color: red;
  375. font-size: 36upx;
  376. line-height: 30upx;
  377. }
  378. .list-item-right{
  379. font-size: 30rpx;
  380. color: #666666;
  381. display: flex;
  382. align-items: center;
  383. // margin-left: 20rpx;
  384. .back-img{
  385. width: 18rpx;
  386. height: 34rpx;
  387. margin-left: 20rpx;
  388. }
  389. .input-box{
  390. text-align: right;
  391. }
  392. }
  393. }
  394. .list-item:last-child{
  395. border-bottom: none;
  396. }
  397. }
  398. .statistics-title{
  399. font-size: 36upx;
  400. font-family: PingFang SC;
  401. font-weight: bold;
  402. color: #191919;
  403. opacity: 1;
  404. margin: 46upx 0 24upx;
  405. }
  406. .statistics-box{
  407. padding: 20upx 30upx;
  408. margin-bottom: 30upx;
  409. background-color: #FFFFFF;
  410. border-radius: 12px;
  411. .rubbishType-type{
  412. margin-bottom: 36upx;
  413. font-size: 28upx;
  414. font-weight: 400;
  415. color: #000000;
  416. }
  417. .rubbish{
  418. font-size:24upx;
  419. overflow-x: scroll;
  420. .rubbishType-item{
  421. display: flex;
  422. flex-direction: column;
  423. align-items: center;
  424. min-width: 24.5%;
  425. }
  426. }
  427. }
  428. .statistics-box:last-child{
  429. margin-bottom:0 ;
  430. }
  431. }
  432. }
  433. </style>