You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
776 lines
18 KiB
776 lines
18 KiB
<template>
|
|
<view class="recycling">
|
|
<view class="recycling-hd" v-if="type == 2">
|
|
<image :src="$picUrl+'/static/news/recyling-banner-01.png'"></image>
|
|
</view>
|
|
<view class="recycling-bd">
|
|
<view class="tab">
|
|
<view class="a" v-if="type == 2">
|
|
<view class="item" @click="tabItem(1)"></view>
|
|
<view class="item" @click="tabItem(2)"></view>
|
|
<view class="item" @click="tabItem(3)"></view>
|
|
</view>
|
|
<view class="b" v-if="type == 2">
|
|
<image v-if="tabIndex == 1" :src="$picUrl+'/static/news/icon-recyling-tab-01.png'"></image>
|
|
<image v-if="tabIndex == 2" :src="$picUrl+'/static/news/icon-recyling-tab-02.png'"></image>
|
|
<image v-if="tabIndex == 3" :src="$picUrl+'/static/news/icon-recyling-tab-03.png'"></image>
|
|
</view>
|
|
<view class="b" v-else>
|
|
<image :src="$picUrl+'/static/news/icon-recyling-tab-04.png'"></image>
|
|
</view>
|
|
</view>
|
|
<view class="goods">
|
|
<!-- <view class="a">
|
|
<image src="@/static/news/icon-mall.jpg"></image>京送家电武隆路店
|
|
</view> -->
|
|
<view class="b">
|
|
<!-- <view class="l">
|
|
<image class="pic" src="@/static/home/phone.jpg"></image>
|
|
<view class="info">
|
|
<view class="tel">13770577307</view>
|
|
<view class="address">杭州市萧山区宏达路234号 国际中心</view>
|
|
<view class="time">营业时间：10:00-18:00</view>
|
|
</view>
|
|
<view class="do">
|
|
<view class="tel">
|
|
<image src="@/static/news/tel.png"></image>电话
|
|
</view>
|
|
<view class="tel">
|
|
<image src="@/static/news/address.png"></image>导航
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<view class="r">
|
|
<image class="pic" :src="info.server_image"></image>
|
|
<view class="info">
|
|
<view class="tel">{{info.server_name}}</view>
|
|
<view class="price">¥<text>{{info.server_price}}</text></view>
|
|
</view>
|
|
<view class="num">
|
|
x1
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="form">
|
|
<view class="item">
|
|
<view class="a">服务时间</view>
|
|
<view class="b" @click="openPage(1)">
|
|
<view class="select" :class="server_time?'select-on':''">{{server_time?server_time:(type == 1?'请选择预约上门时间':'请选择预约到店时间')}}
|
|
</view>
|
|
<u-icon style="margin-left: 10rpx;" name="arrow-right"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="a">优惠券</view>
|
|
<view class="b" @click="openPage(2)">
|
|
<view class="select" :class="couponIndex >= 0?'select-on':''">
|
|
{{couponIndex >= 0? couponList[couponIndex].name:(couponList.length > 0?(couponIndex == -9998?'不使用优惠券':'请选择优惠券'):'暂无优惠券')}}
|
|
</view>
|
|
<u-icon style="margin-left: 10rpx;" name="arrow-right"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="a">联系人</view>
|
|
<view class="b">
|
|
<input class="box1" v-model="username" type="text" placeholder="联系人姓名" />
|
|
<!-- <view class="radio">
|
|
<u-radio-group v-model="radioValue" active-color="red">
|
|
<u-radio name="先生">先生</u-radio>
|
|
<u-radio name="女士">女士</u-radio>
|
|
</u-radio-group>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="a">联系电话</view>
|
|
<view class="b">
|
|
<input class="box" v-model="mobile" type="number" placeholder="联系人手机号码" />
|
|
</view>
|
|
</view>
|
|
<view class="item" v-if="type == 1">
|
|
<view class="a">所在城市</view>
|
|
<view class="b" @click="addrshow=true">
|
|
<input type="text" disabled style="font-size: 28rpx;" placeholder="请选择地址"
|
|
v-model="region">
|
|
<u-icon name="arrow-right" color="#8B8B8B" size="30"></u-icon>
|
|
<u-picker @confirm="changeRegion" v-model="addrshow" mode="region"></u-picker>
|
|
</view>
|
|
</view>
|
|
<view class="item" v-if="type == 1">
|
|
<view class="a">详细地址</view>
|
|
<view class="b">
|
|
<input class="box" v-model="address" type="text" placeholder="例：12幢1单元102室" />
|
|
</view>
|
|
</view>
|
|
<view class="remark" style="margin-top: 20rpx;">
|
|
<view class="name">备注 ：</view>
|
|
<view class="xu">
|
|
<view class="li" @click="openPage(5,'可提前来')">可提前来</view>
|
|
<view class="li" @click="openPage(5,'来之前打电话')">来之前打电话</view>
|
|
<view class="li" @click="openPage(5,'请尽快联系我')">请尽快联系我</view>
|
|
</view>
|
|
<view class="content">
|
|
<u-input v-model="remake" height="260" type="textarea" placeholder="请输入您的留言，最多可留言100字"
|
|
:border="true" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="recycling-fd">
|
|
<view class="a" v-if="type==2">免支付预购</view>
|
|
<view class="c" v-else style="color: #FE483B;font-size: 30rpx;">￥{{pay_price}}元</view>
|
|
<view class="b" @click="openPage(3)">提交订单</view>
|
|
</view>
|
|
<!-- 选择优惠券 -->
|
|
<u-popup v-model="isShow" mode="bottom" border-radius="12" mask-close-able="false" closeable>
|
|
<view class="recycling-classify">
|
|
<view class="recycling-classify-hd">优惠券列表</view>
|
|
<view class="recycling-classify-bd">
|
|
<scroll-view scroll-y class="m">
|
|
<view class="item" @click="tabMItem(-1,'-9998')">
|
|
<view :class="couponIndex == -9998?'item-on':''">不使用</view>
|
|
</view>
|
|
<view class="item" v-for="(a,i) in couponList" :key="i" @click="tabMItem(a,i)">
|
|
<view :class="couponIndex == i?'item-on':''">{{a.name}}</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
<!-- 时间选择器 -->
|
|
<u-picker mode="time" :params="params" v-model="show" confirm-color="#FE483B" :show-time-tag="false"
|
|
@confirm="confirm"></u-picker>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import * as newFunApi from '@/api/newFun'
|
|
export default {
|
|
data() {
|
|
return {
|
|
params: {
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
hour: true,
|
|
minute: true,
|
|
second: true
|
|
},
|
|
userInfo: {},
|
|
orderInfo: {},
|
|
list2: [],
|
|
pay_price: 0,
|
|
show2: true,
|
|
isShow: false,
|
|
show: false,
|
|
addrshow: false,
|
|
info: {},
|
|
type: 1,
|
|
isClick: true,
|
|
radioValue: "男士",
|
|
couponIndex: -9999,
|
|
tabIndex: 1,
|
|
fileList: [{
|
|
url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
|
|
}],
|
|
tabMIndex: 0,
|
|
address: "",
|
|
coupon_id: "",
|
|
remake: "",
|
|
username: "",
|
|
mobile: "",
|
|
server_time: "",
|
|
region: [],
|
|
couponList: [],
|
|
server_id: "",
|
|
order_id: ""
|
|
}
|
|
},
|
|
onLoad(o) {
|
|
this.type = o.type;
|
|
this.server_id = o.id;
|
|
if (this.type == 1 && o.id) {
|
|
this.getServerCheckOrder()
|
|
}
|
|
},
|
|
methods: {
|
|
tabMItem(a, i) {
|
|
this.couponIndex = i
|
|
this.coupon_id = (a ? a.user_coupon_id : "")
|
|
this.isShow = false;
|
|
this.getServerCheckOrder(1)
|
|
},
|
|
//获取优惠券列表
|
|
async getServerCheckOrder(type) {
|
|
const {
|
|
status,
|
|
data
|
|
} = await newFunApi.serverCheckOrder({
|
|
server_id: this.server_id,
|
|
coupon_id: this.coupon_id
|
|
})
|
|
if (status == 200) {
|
|
this.info = data.info
|
|
this.couponList = data.coupon_list;
|
|
this.coupon_id = data.coupon_id
|
|
this.coupon_money = data.coupon_money
|
|
this.pay_price = data.pay_price
|
|
console.log(this.couponIndex)
|
|
}
|
|
},
|
|
confirm(e) {
|
|
this.server_time = e.year + "-" + e.month + '-' + e.day + " " + e.hour + "-" + e.minute + '-' + e.second
|
|
},
|
|
tabItem(i) {
|
|
this.tabIndex = i
|
|
},
|
|
changeRegion(e) {
|
|
this.addrshow = false
|
|
this.region = e.province.name + e.city.name + e.area.name;
|
|
},
|
|
openPage(i, a) {
|
|
if (i == 1) {
|
|
this.show = true
|
|
} else if (i == 2) {
|
|
this.isShow = true
|
|
} else if (i == 3) {
|
|
if (!this.server_time) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "服务时间不能为空"
|
|
})
|
|
return;
|
|
}
|
|
if (!this.username) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "联系人不能为空"
|
|
})
|
|
return;
|
|
}
|
|
if (!this.mobile) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "联系号码不能为空"
|
|
})
|
|
return;
|
|
}
|
|
if (!/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(this.mobile)) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "联系号码格式不正确"
|
|
})
|
|
return;
|
|
}
|
|
if (this.region.length == 0) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "请选择所在城市"
|
|
})
|
|
return;
|
|
}
|
|
if (!this.address) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "详细地址不能为空"
|
|
})
|
|
return;
|
|
}
|
|
if (this.isClick == false) {
|
|
return;
|
|
}
|
|
this.isClick = false;
|
|
this.toServerCreateOrder();
|
|
} else if (i == 5) {
|
|
this.remake = a
|
|
} else {
|
|
|
|
}
|
|
},
|
|
|
|
//创建订单
|
|
async toServerCreateOrder() {
|
|
let {
|
|
status,
|
|
data,
|
|
message
|
|
} = await newFunApi.serverCreateOrder({
|
|
server_id: this.server_id,
|
|
client: 'MP-WEIXIN',
|
|
server_address: this.region[0] + this.region[1] + this.region[2] + this.address,
|
|
server_time: this.server_time,
|
|
coupon_id: this.coupon_id,
|
|
remake: this.remake,
|
|
username: this.username,
|
|
mobile: this.mobile,
|
|
})
|
|
if (status == 200) {
|
|
this.isClick = true
|
|
this.order_id = data.order_id
|
|
uni.redirectTo({
|
|
url: "/pages/news/recycling/pay?type=fuwu&order_id=" + data.order_id
|
|
})
|
|
} else {
|
|
this.isClick = true
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: message
|
|
})
|
|
setTimeout(() => {
|
|
uni.redirectTo({
|
|
url: "/pages/news/recycling/orderList"
|
|
})
|
|
}, 2000)
|
|
}
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.recycling {
|
|
min-height: 100vh;
|
|
background-color: #FFFFFF;
|
|
padding-bottom: 130rpx;
|
|
overflow: hidden;
|
|
|
|
&-classify {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
|
|
&-hd {
|
|
padding: 30rpx 60rpx;
|
|
position: relative;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #303030;
|
|
text-align: center;
|
|
|
|
.a {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #FF624F;
|
|
position: absolute;
|
|
top: 30rpx;
|
|
left: 40rpx;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
&-bd {
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
|
|
.l {
|
|
width: 210rpx;
|
|
height: 560rpx;
|
|
background-color: #F7F8FA;
|
|
|
|
.item {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
height: 70rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #303030;
|
|
white-space: nowrap;
|
|
line-height: 70rpx;
|
|
padding-left: 30rpx;
|
|
box-sizing: border-box;
|
|
text-align: left;
|
|
|
|
&-on {
|
|
background-color: #fff;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
|
|
.m {
|
|
width: 100%;
|
|
text-align: center;
|
|
max-height: 560rpx;
|
|
|
|
.item {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
height: 70rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #303030;
|
|
white-space: nowrap;
|
|
line-height: 70rpx;
|
|
padding-left: 80rpx;
|
|
box-sizing: border-box;
|
|
text-align: left;
|
|
|
|
&-on {
|
|
color: #FF624F;
|
|
}
|
|
}
|
|
}
|
|
|
|
.r {
|
|
width: 540rpx;
|
|
height: 560rpx;
|
|
|
|
.item {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
height: 70rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #303030;
|
|
white-space: nowrap;
|
|
line-height: 70rpx;
|
|
padding-left: 80rpx;
|
|
box-sizing: border-box;
|
|
|
|
&-on {
|
|
color: #FF624F;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.slot-btn {
|
|
width: 80px;
|
|
height: 80px;
|
|
background: #FFFFFF;
|
|
border-radius: 10rpx;
|
|
border: 1px solid #C0C0C0;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #D1D1D1;
|
|
|
|
image {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
|
|
&-hd {
|
|
width: 686rpx;
|
|
height: 152rpx;
|
|
border-radius: 8rpx;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
margin-top: 30rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
&-bd {
|
|
width: 690rpx;
|
|
min-height: 280rpx;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
margin-top: 30rpx;
|
|
position: relative;
|
|
|
|
.tab {
|
|
width: 690rpx;
|
|
height: 280rpx;
|
|
|
|
.b {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.a {
|
|
width: 100%;
|
|
height: 98rpx;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.item {
|
|
flex: 1;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.goods {
|
|
padding: 30rpx 35rpx;
|
|
overflow: hidden;
|
|
border-left: 1px solid #F1F1F1;
|
|
border-right: 1px solid #F1F1F1;
|
|
|
|
.a {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
}
|
|
|
|
.b {
|
|
padding: 20rpx 0;
|
|
overflow: hidden;
|
|
|
|
.l {
|
|
display: flex;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
|
|
.pic {
|
|
width: 182rpx;
|
|
height: 146rpx;
|
|
border-radius: 6rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.info {
|
|
width: 305rpx;
|
|
margin-right: 20rpx;
|
|
|
|
.title {
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #5C5C5C;
|
|
}
|
|
|
|
.address {
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #5C5C5C;
|
|
height: 80rpx;
|
|
line-height: 40rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.time {
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #5C5C5C;
|
|
}
|
|
}
|
|
|
|
.do {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 20rpx;
|
|
font-weight: 400;
|
|
color: #989898;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
image {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.r {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
overflow: hidden;
|
|
margin-top: 30rpx;
|
|
|
|
.pic {
|
|
width: 182rpx;
|
|
height: 146rpx;
|
|
border-radius: 6rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.info {
|
|
width: 305rpx;
|
|
margin-right: 20rpx;
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #212121;
|
|
}
|
|
|
|
.price {
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #FF584D;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
|
|
.num {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
font-weight: 400;
|
|
color: #989898;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.form {
|
|
padding: 0 40rpx;
|
|
overflow: hidden;
|
|
border-left: 1px solid #F1F1F1;
|
|
border-right: 1px solid #F1F1F1;
|
|
border-bottom: 1px solid #F1F1F1;
|
|
|
|
.remark {
|
|
.name {
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #313131;
|
|
}
|
|
|
|
.xu {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
overflow: hidden;
|
|
|
|
.li {
|
|
line-height: 52rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 6rpx;
|
|
border: 1px solid #EDEDED;
|
|
padding: 0 20rpx;
|
|
margin-right: 20rpx;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #949494;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
padding: 20rpx 0 50rpx;
|
|
font-size: 28rpx;
|
|
color: #212121;
|
|
}
|
|
}
|
|
|
|
.photo {
|
|
padding: 20rpx 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.item {
|
|
padding: 20rpx 0;
|
|
border-bottom: 1px solid #F4F4F4;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.a {
|
|
width: 160rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #313131;
|
|
line-height: 45rpx;
|
|
}
|
|
|
|
.b {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.select {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
line-height: 45rpx;
|
|
color: #949494;
|
|
|
|
&-on {
|
|
color: #212121;
|
|
}
|
|
}
|
|
|
|
.box {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
color: #212121;
|
|
line-height: 45rpx;
|
|
}
|
|
|
|
.box1 {
|
|
width: 160rpx;
|
|
font-size: 28rpx;
|
|
color: #212121;
|
|
line-height: 45rpx;
|
|
}
|
|
|
|
.radio {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
flex: 1;
|
|
border-left: 1px solid #E6E6E6;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-fd {
|
|
width: 100%;
|
|
height: 120rpx;
|
|
background-color: #FFFFFF;
|
|
padding: 25rpx 25rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 99;
|
|
|
|
.a {
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #727272;
|
|
}
|
|
|
|
.b {
|
|
width: 502rpx;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
background: #FE483B;
|
|
border-radius: 88rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|