123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443 |
- <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>
|