shuxiaoquan
10 months ago
parent
775dc191c8
commit
b7aa5b1b05
@ -1,17 +1,27 @@ |
||||
import request from '@/utils/request' |
||||
|
||||
// api地址
|
||||
const api = { |
||||
list: 'shop/list', |
||||
detail: 'shop/detail' |
||||
|
||||
// 服务 服务列表 查询优惠券
|
||||
export const serverCheckOrder = (param) => { |
||||
return request.post('server/checkOrder', param) |
||||
} |
||||
|
||||
// 服务 服务列表
|
||||
export const serverList = (param) => { |
||||
return request.post('server/list', param) |
||||
} |
||||
|
||||
// 服务 服务分类
|
||||
export const serverCategoryList = (param) => { |
||||
return request.post('server/categoryList', param) |
||||
} |
||||
|
||||
// 自提门店列表
|
||||
export const inviteList = (param) => { |
||||
return request.get(api.list, param) |
||||
// 店长 商品列表
|
||||
export const storeKeeperList = (param) => { |
||||
return request.get('storeKeeper/list', param) |
||||
} |
||||
|
||||
// 门店详情
|
||||
export const detail = (shopId) => { |
||||
return request.get(api.detail, { shopId }) |
||||
export const storeKeeperDetail = (shopId) => { |
||||
return request.get('shop/detail', { shopId }) |
||||
} |
||||
|
||||
@ -0,0 +1,472 @@ |
||||
<template> |
||||
<view class="recycling"> |
||||
<view class="recycling-hd"> |
||||
<image src="@/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="@/static/news/icon-recyling-tab-01.png"></image> |
||||
<image v-if="tabIndex == 2" src="@/static/news/icon-recyling-tab-02.png"></image> |
||||
<image v-if="tabIndex == 3" src="@/static/news/icon-recyling-tab-03.png"></image> |
||||
</view> |
||||
<view class="b" v-else> |
||||
<image src="@/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="@/static/home/phone.jpg"></image> |
||||
<view class="info"> |
||||
<view class="tel">手机回收</view> |
||||
<view class="price">¥<text>4189234</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">请选择预约到店时间</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" 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" type="text" placeholder="联系人手机号码" /> |
||||
</view> |
||||
</view> |
||||
<view class="item" v-if="tabIndex == 3"> |
||||
<view class="a">联系人微信</view> |
||||
<view class="b"> |
||||
<input class="box" type="text" placeholder="联系人微信号码" /> |
||||
</view> |
||||
</view> |
||||
<view class="item" v-if="tabIndex == 3"> |
||||
<view class="a">发件地址</view> |
||||
<view class="b"> |
||||
<picker mode="region"> |
||||
<view class="select">请选择所在人城市</view> |
||||
</picker> |
||||
</view> |
||||
</view> |
||||
<view class="item" v-if="tabIndex == 3"> |
||||
<view class="a">门牌号</view> |
||||
<view class="b"> |
||||
<input class="box" type="text" placeholder="详细地址 例：12幢1单元102室" /> |
||||
</view> |
||||
</view> |
||||
<view class="item"> |
||||
<view class="a">期待卖价</view> |
||||
<view class="b"> |
||||
<input class="box" type="text" placeholder="请输入您期待的售卖价格（元）" /> |
||||
</view> |
||||
</view> |
||||
<view class="photo"> |
||||
<u-upload :action="action" width="160" height="160" :file-list="fileList" :custom-btn="true" max-count="5"> |
||||
<template v-slot:addBtn> |
||||
<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150"> |
||||
<image src="/static/news/icon-upload.png"></image> |
||||
<view class="1">上传图片</view> |
||||
<view class="1">1/8</view> |
||||
</view> |
||||
</template> |
||||
</u-upload> |
||||
</view> |
||||
<view class="remark"> |
||||
<view class="name">留言 ：</view> |
||||
<view class="xu"> |
||||
<view class="li">可提前来</view> |
||||
<view class="li">来之前打电话</view> |
||||
<view class="li">请尽快联系我</view> |
||||
</view> |
||||
<view class="content"> |
||||
<u-input v-model="value" 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>￥{{info.server_price}}元</view> |
||||
<view class="b" @click="openPage(2)">提交订单</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
<script> |
||||
export default{ |
||||
data(){ |
||||
return { |
||||
info: {}, |
||||
type: 1, |
||||
radioValue: "男士", |
||||
tabIndex: 1, |
||||
fileList: [ |
||||
{ |
||||
url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg', |
||||
} |
||||
], |
||||
} |
||||
}, |
||||
onLoad(o) { |
||||
this.info = uni.getStorageSync("getInfo") |
||||
this.type = o.type |
||||
}, |
||||
methods: { |
||||
tabItem(i) { |
||||
this.tabIndex = i |
||||
}, |
||||
openPage(i){ |
||||
if(i == 1){ |
||||
uni.navigateTo({ |
||||
url: "/pages/news/recycling/timer" |
||||
}) |
||||
}else { |
||||
uni.redirectTo({ |
||||
url: "/pages/news/recycling/order" |
||||
}) |
||||
} |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.recycling{ |
||||
min-height: 100vh; |
||||
background-color: #FFFFFF; |
||||
padding-bottom: 130rpx; |
||||
overflow: hidden; |
||||
.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> |
||||
|
After Width: | Height: | Size: 16 KiB |
Loading…
Reference in new issue