|
@@ -0,0 +1,443 @@
|
|
|
+<template>
|
|
|
+ <view class="content-yy">
|
|
|
+ <!-- <uni-nav-bar left-icon="back" title="下单" class="nav-bar"></uni-nav-bar> -->
|
|
|
+ <view class="content-nav">
|
|
|
+ <!-- <view>
|
|
|
+ <u-icon name="arrow-left" color="#fff" size="34"></u-icon>
|
|
|
+ <text style="color: #fff;">下单</text>
|
|
|
+ </view> -->
|
|
|
+ <u-image src="/static/index/bg_order.png" width="100%" height="396" class="nav-image"></u-image>
|
|
|
+ </view>
|
|
|
+ <!-- <scroll-view :scroll-y="true" style="height:100%;"> -->
|
|
|
+ <view class="content-body">
|
|
|
+ <view class="store-image flex flex_column justify_center">
|
|
|
+ <u-image src="/static/index/def_home_shop.png" width="172" height="172" ></u-image>
|
|
|
+ <text>骑手张三的店铺</text>
|
|
|
+ </view>
|
|
|
+ <!-- 表单 -->
|
|
|
+ <view class="list-container">
|
|
|
+ <view class="list-item">
|
|
|
+ <view class="list-item-left phone">
|
|
|
+ <text>联系电话</text>
|
|
|
+ </view>
|
|
|
+ <view class="list-item-right flex_1">
|
|
|
+ <u-input class="flex_1" :custom-style="inputClass" v-model="form.contactMobile" placeholder="请输入车牌号码" placeholder-style="color:'#bbb';font-size:18px"/>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-item">
|
|
|
+ <view class="list-item-left">
|
|
|
+ <text>通信地址</text>
|
|
|
+ </view>
|
|
|
+ <view class="list-item-right flex_1">
|
|
|
+ <u-input class="flex_1" :custom-style="inputClass" v-model="form.contactAddress" @click="selectAddress" :disabled="true" placeholder="请选择通信地址" placeholder-style="color:'#bbb';font-size:18px"/>
|
|
|
+ <u-icon class="back-img" name="arrow-right" color="#9DA8B5" @click="selectAddress"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-item">
|
|
|
+ <view class="list-item-left">
|
|
|
+ <text>详细地址</text>
|
|
|
+ </view>
|
|
|
+ <view class="list-item-right flex_1">
|
|
|
+ <u-input class="flex_1" :custom-style="inputClass" v-model="form.houseAddress" placeholder="街道,楼牌号等" placeholder-style="color:'#bbb';font-size:18px"/>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 一键预约 -->
|
|
|
+ <u-button :custom-style="yuYueBtn" :hair-line="false" @click="submit">一键预约</u-button>
|
|
|
+ <!-- 今日上门回收价格 -->
|
|
|
+ <view class="statistics-title">今日上门回收价格</view>
|
|
|
+ <view>
|
|
|
+ <!-- 纸张类 -->
|
|
|
+ <view class="statistics-box" v-if="rubbishPaperList.length">
|
|
|
+ <view class="rubbishType-type">
|
|
|
+ {{rubbishPaperName ? rubbishPaperName :''}}
|
|
|
+ </view>
|
|
|
+ <view class="flex rubbish">
|
|
|
+ <view v-for="item in rubbishPaperList" class="rubbishType-item">
|
|
|
+ <u-image :src="item.image" width="92" height="92"></u-image>
|
|
|
+ <span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? (item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 塑料类 -->
|
|
|
+ <view class="statistics-box" v-if="rubbishSLList.length">
|
|
|
+ <view class="rubbishType-type">
|
|
|
+ {{rubbishSLName ? rubbishSLName :''}}
|
|
|
+ </view>
|
|
|
+ <view class="flex rubbish">
|
|
|
+ <view v-for="item in rubbishSLList" class="rubbishType-item">
|
|
|
+ <u-image :src="item.image" width="92" height="92"></u-image>
|
|
|
+ <span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? (item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 金属类 -->
|
|
|
+ <view class="statistics-box" v-if="rubbishJSList.length">
|
|
|
+ <view class="rubbishType-type">
|
|
|
+ {{rubbishJSName ? rubbishJSName :''}}
|
|
|
+ </view>
|
|
|
+ <view class="flex rubbish">
|
|
|
+ <view v-for="item in rubbishJSList" class="rubbishType-item">
|
|
|
+ <u-image :src="item.image" width="92" height="92"></u-image>
|
|
|
+ <span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? (item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 衣物类 -->
|
|
|
+ <view class="statistics-box" v-if="rubbishYWList.length">
|
|
|
+ <view class="rubbishType-type">
|
|
|
+ {{rubbishYWName ? rubbishYWName :''}}
|
|
|
+ </view>
|
|
|
+ <view class="flex rubbish">
|
|
|
+ <view v-for="item in rubbishYWList" class="rubbishType-item">
|
|
|
+ <u-image :src="item.image" width="92" height="92"></u-image>
|
|
|
+ <span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? (item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="nodata" v-if="rubbishPriceList.length==0">
|
|
|
+ <u-empty src="/static/def_result.png" :text="noDataText" icon-size="260" ></u-empty>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- </scroll-view> -->
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
|
|
|
+ import {geRubbishType} from '@/api/index'
|
|
|
+ import {userInfoSave} from '@/api/data.js'
|
|
|
+ export default{
|
|
|
+ components: {uniNavBar},
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ yuYueBtn:{
|
|
|
+ background: "#1995FF",
|
|
|
+ borderRadius: "8px",
|
|
|
+ color:'#fff',
|
|
|
+ },
|
|
|
+ rubbishPaperName:"",
|
|
|
+ rubbishSLName:"",
|
|
|
+ rubbishYWName:"",
|
|
|
+ rubbishJSName:"",
|
|
|
+ rubbishPaperList:[],
|
|
|
+ rubbishSLList:[],
|
|
|
+ rubbishYWList:[],
|
|
|
+ rubbishJSList:[],
|
|
|
+ rubbishPriceList:[],
|
|
|
+ form: {
|
|
|
+ contactMobile: '', //联系人手机
|
|
|
+ contactAddress:'' ,// 通讯地址
|
|
|
+ lat:'', // 通讯地址的经度
|
|
|
+ lng:'', // 通讯地址的纬度
|
|
|
+ houseAddress:'', // 详细地址
|
|
|
+ },
|
|
|
+ area:{}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ pageInit() {
|
|
|
+ this.geRubbishTypeList()
|
|
|
+ this.checkUpdate()
|
|
|
+ },
|
|
|
+ //截取省市区
|
|
|
+ getArea(str) {
|
|
|
+ // let area = {}
|
|
|
+ let index11 = 0
|
|
|
+ let index1 = str.indexOf("省")
|
|
|
+ if (index1 == -1) {
|
|
|
+ index11 = str.indexOf("自治区")
|
|
|
+ if (index11 != -1) {
|
|
|
+ this.area.Province = str.substring(0, index11 + 3)
|
|
|
+ } else {
|
|
|
+ this.area.Province = str.substring(0, 0)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.area.Province = str.substring(0, index1 + 1)
|
|
|
+ }
|
|
|
+
|
|
|
+ let index2 = str.indexOf("市")
|
|
|
+ if (index11 == -1) {
|
|
|
+ this.area.City = str.substring(index11 + 1, index2 + 1)
|
|
|
+ } else {
|
|
|
+ if (index11 == 0) {
|
|
|
+ this.area.City = str.substring(index1 + 1, index2 + 1)
|
|
|
+ } else {
|
|
|
+ this.area.City = str.substring(index11 + 3, index2 + 1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let index3 = str.lastIndexOf("区")
|
|
|
+ if (index3 == -1) {
|
|
|
+ index3 = str.indexOf("县")
|
|
|
+ this.area.Country = str.substring(index2 + 1, index3 + 1)
|
|
|
+ } else {
|
|
|
+ this.area.Country = str.substring(index2 + 1, index3 + 1)
|
|
|
+ }
|
|
|
+ // return this.area;
|
|
|
+ if(this.area.Province==''){
|
|
|
+ this.area.Province=this.area.City
|
|
|
+ }
|
|
|
+ console.log(this.area,'---------------省市区')
|
|
|
+ },
|
|
|
+ // 选择通信地址
|
|
|
+ selectAddress(){
|
|
|
+ wx.chooseLocation({
|
|
|
+ success:(res)=>{
|
|
|
+ if(res){
|
|
|
+ this.getArea(res.address)
|
|
|
+ console.log(res,'------------------地址信息',this.getArea(res.address))
|
|
|
+ // this.form.contactAddress=res.address
|
|
|
+ this.form.lat=res.latitude
|
|
|
+ this.form.lng=res.longitude
|
|
|
+ this.form.contactAddress=this.area.Province+this.area.City+this.area.Country
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取垃圾分类
|
|
|
+ geRubbishTypeList(){
|
|
|
+ geRubbishType().then(res=>{
|
|
|
+ if(res.status==200){
|
|
|
+ console.log(res,'---------垃圾类型')
|
|
|
+ this.rubbishPriceList=res.data
|
|
|
+ const a= res.data.find(item=>item.code=='PAPER')
|
|
|
+ const b= res.data.find(item=>item.code=='PLASTIC')
|
|
|
+ const c= res.data.find(item=>item.code=='CLOTHES')
|
|
|
+ const d= res.data.find(item=>item.code=='METAL')
|
|
|
+ /* 纸张类 */
|
|
|
+ this.rubbishPaperList=a.rubbishTypeVOList
|
|
|
+ this.rubbishPaperList.map(item=>{
|
|
|
+ if(item.code=='YELLOW_PAPER'){
|
|
|
+ item.image='/static/index/icon_aper_yellow.png'
|
|
|
+ }
|
|
|
+ if(item.code=='COLOUR_PAPER'){
|
|
|
+ item.image='/static/index/icon_aper_flower.png'
|
|
|
+ }
|
|
|
+ if(item.code=='BOOK_PAPER'){
|
|
|
+ item.image='/static/index/icon_book.png'
|
|
|
+ }
|
|
|
+ if(item.code=='MAGAZINE'){
|
|
|
+ item.image='/static/index/icon_magazine.png'
|
|
|
+ }
|
|
|
+ if(item.code=='OTHER_PAPER'){
|
|
|
+ item.image='/static/index/icon_aper_miscellaneous.png'
|
|
|
+ }
|
|
|
+ if(item.code=='NEWS_PAPER'){
|
|
|
+ item.image='/static/index/icon_newspaper.png'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 塑料类
|
|
|
+ this.rubbishSLList=b.rubbishTypeVOList
|
|
|
+ this.rubbishSLList.map(item=>{
|
|
|
+ if(item.code=='PLASTIC_WHITE'){
|
|
|
+ item.image='/static/index/icon_frame_white.png'
|
|
|
+ }
|
|
|
+ if(item.code=='PLASTIC_BLACK'){
|
|
|
+ item.image='/static/index/icon_frame_black.png'
|
|
|
+ }
|
|
|
+ if(item.code=='PMMA'){
|
|
|
+ item.image='/static/index/icon_acrylic.png'
|
|
|
+ }
|
|
|
+ if(item.code=='PLASTIC_LUCENCY'){
|
|
|
+ item.image='/static/index/icon_bottle.png'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 衣物
|
|
|
+ this.rubbishYWList=c.rubbishTypeVOList
|
|
|
+ this.rubbishYWList.map(item=>{
|
|
|
+ if(item.code=='SIMPLE_CLOTHES'){
|
|
|
+ item.image='/static/index/icon_clothes.png'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 金属
|
|
|
+ this.rubbishJSList=d.rubbishTypeVOList
|
|
|
+ this.rubbishJSList.map(item=>{
|
|
|
+ if(item.code=='THIN_IRON'){
|
|
|
+ item.image='/static/index/icon_iron_thin.png'
|
|
|
+ }
|
|
|
+ if(item.code=='THICK_IRON'){
|
|
|
+ item.image='/static/index/icon_iron_thick.png'
|
|
|
+ }
|
|
|
+ if(item.code=='STAINLESS_IRON'){
|
|
|
+ item.image='/static/index/icon_steel.png'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.rubbishPaperName=a.name
|
|
|
+ this.rubbishSLName=b.name
|
|
|
+ this.rubbishYWName=c.name
|
|
|
+ this.rubbishJSName=d.name
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 预约
|
|
|
+ submit(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'/pages/index/yuyueResult'
|
|
|
+ })
|
|
|
+ // const testVal=/^1[34578]\d{9}$/
|
|
|
+ // if (!testVal.test(this.form.contactMobile)) {
|
|
|
+ // uni.showToast({
|
|
|
+ // title: '请输入正确的联系电话',
|
|
|
+ // icon: 'none'
|
|
|
+ // })
|
|
|
+ // return false
|
|
|
+ // }
|
|
|
+ // const params=Object.assign(this.form,{lat:this.form.lat,lng:this.form.lng})
|
|
|
+ // userInfoSave(params).then(res=>{
|
|
|
+ // if(res.status==200){
|
|
|
+ // uni.$emit('pageType', {data: 'userInfo' })
|
|
|
+ // setTimeout(()=>{
|
|
|
+ // uni.navigateBack({
|
|
|
+
|
|
|
+ // })
|
|
|
+ // },300)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ onLaunch(){
|
|
|
+
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.pageInit()
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .content-yy{
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .content-nav{
|
|
|
+ width: 750upx;
|
|
|
+ height: 396upx ;
|
|
|
+ position: fixed;
|
|
|
+ top:-120upx;
|
|
|
+ left: 0;
|
|
|
+ background: #1995FF;
|
|
|
+ .nav-image{
|
|
|
+ display: flex;
|
|
|
+ z-index: 100;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-body{
|
|
|
+ width: 750upx;
|
|
|
+ height: 100vh;
|
|
|
+ padding: 0 26upx 30upx;
|
|
|
+ flex:1;
|
|
|
+ overflow-y: scroll;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-radius: 24px 24px 0px 0px;
|
|
|
+ position: absolute;
|
|
|
+ top:220upx;
|
|
|
+ // padding-top: 270upx;
|
|
|
+ left: 0;
|
|
|
+ .store-image{
|
|
|
+ // display:table-cell;
|
|
|
+ padding:60upx 0;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .list-container{
|
|
|
+ width: 100%;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 24upx;
|
|
|
+ margin-bottom: 40upx;
|
|
|
+ box-sizing:border-box;
|
|
|
+ .border-bottom{
|
|
|
+ padding-left: 32rpx;
|
|
|
+ border-bottom: 1px solid #E5E5E5;
|
|
|
+ }
|
|
|
+ .margin-bot{
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ .list-item{
|
|
|
+ // width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ // display: flex;
|
|
|
+ margin: 0 32upx;
|
|
|
+ padding: 30rpx 0;
|
|
|
+ // justify-content: space-between;
|
|
|
+ // align-items:center;
|
|
|
+ border-bottom: 1px solid #E5E5E5;
|
|
|
+ .user-photo{
|
|
|
+ display: block;
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .list-item-left{
|
|
|
+ font-size: 30upx;
|
|
|
+ margin-bottom: 10upx;
|
|
|
+ color: #666E75;
|
|
|
+ }
|
|
|
+ .phone:after {
|
|
|
+ content: '*';
|
|
|
+ color: red;
|
|
|
+ font-size: 36upx;
|
|
|
+ line-height: 30upx;
|
|
|
+ }
|
|
|
+ .list-item-right{
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #666666;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ // margin-left: 20rpx;
|
|
|
+ .back-img{
|
|
|
+ width: 18rpx;
|
|
|
+ height: 34rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ .input-box{
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .list-item:last-child{
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .statistics-title{
|
|
|
+ font-size: 36upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #191919;
|
|
|
+ opacity: 1;
|
|
|
+ margin: 46upx 0 24upx;
|
|
|
+ }
|
|
|
+ .statistics-box{
|
|
|
+ padding: 20upx 30upx;
|
|
|
+ margin-bottom: 30upx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 12px;
|
|
|
+ .rubbishType-type{
|
|
|
+ margin-bottom: 36upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .rubbish{
|
|
|
+ font-size:24upx;
|
|
|
+ overflow-x: scroll;
|
|
|
+ .rubbishType-item{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ min-width: 24.5%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .statistics-box:last-child{
|
|
|
+ margin-bottom:0 ;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|