<template>

<view>

<u-navbar title="提交订单" :background="backgroundColor" title-color="#000" back-icon-color="#000" :border-bottom ="false"></u-navbar>

<view class="content">

<!-- 地址区域 -->

<view class="address">

<view class="title">收货地址</view>

<view class="addressInfo">

<view class="line">

<view class="text">地址</view>

<view>浙江省杭州市萧山区江南之星小区20幢2单元1903</view>

<u-icon name="map-fill" @click="navigate('/pages/addressList/addressList')"></u-icon>

</view>

<view class="line">

<view class="text">姓名</view>

<view>xxx</view>

</view>

<view class="line">

<view class="text">手机号</view>

<view>2222222222</view>

</view>

</view>

</view>

<!-- 服务选择区域 -->

<view class="choose">

<view class="title">服务时长</view>

<view class="subsection">

<u-subsection :list="list" :current="current" font-size="24" active-color="#f29d38" @change="changeSubsection"></u-subsection>

</view>

</view>

<!-- 服务内容区域 -->

<view class="service_content">

<!-- 头部 -->

<view class="top">

<view class="title">一手环保科技有限公司</view>

<view class="tag">生活服务</view>

</view>

<!-- 分割线 -->

<u-line color="rgba(0,0,0,0.03);" length="660rpx"/>

<!-- 服务商品信息 -->

<view class="service_info">

<!-- 顶部图片以及商品信息 -->

<view class="line">

<view class="left">

<image src="cloud://ohenv-3gfjcna9629d6f9a.6f68-ohenv-3gfjcna9629d6f9a-1306492505/good/30.png" mode="widthFix"></image>

<view class="info">

<view class="name">

垃圾代扔半年服务

</view>

<view class="tag">

x1

</view>

</view>

</view>

<view class="right">

¥ 34.9

</view>

</view>

<!-- 优惠金额 -->

<view class="line">

<view class="left">

<u-icon name="red-packet-fill" color="red" size="30" label="优惠金额" label-pos="right" label-size="26" label-color="#000"></u-icon>

</view>

<view class="right">

<view class="num" style="color:red;font-weight: bold;font-size: 27rpx;">- ¥ 17</view>

</view>

</view>

<!-- 优惠时长 -->

<view class="line">

<view class="left">

<u-icon name="clock-fill" color="red" size="30" label="额外时长" label-pos="right" label-size="26" label-color="#000"></u-icon>

</view>

<view class="right">

<view class="num" style="color:red;font-weight: bold;font-size: 27rpx;">+ 15天</view>

</view>

</view>

<!-- 优惠券 -->

<view class="line">

<view class="left">

<u-icon name="gift-fill" color="red" size="30" label="代金券" label-pos="right" label-size="26" label-color="#000"></u-icon>

</view>

<view class="right">

<view class="num" style="color:#C0C0C0;font-weight: 500;font-size: 27rpx;">暂无可用 ></view>

</view>

</view>

</view>

<!-- 分割线 -->

<u-line color="rgba(0,0,0,0.03);" length="660rpx"/>

<!-- 底部结算金额 -->

<view class="bottom">

<view class="line">

<view class="left">

<u-icon name="question-circle" color="#c0c0c0" size="30" label="代收规则" label-pos="left" label-size="26" label-color="#c0c0c0"></u-icon>

</view>

<view class="right" style="font-size: 24rpx;line-height: 30rpx;">

已优惠<text style="font-size: 24rpx;color:red;padding-right: 10rpx;">¥ 17</text> <text>小计 </text><text style="font-size: 30rpx;"> ¥ 19.9</text>

</view>

</view>

</view>

</view>

<!-- 回收要求 -->

<view class="tips">

<!-- title -->

<view class="title">服务要求</view>

<!-- 分割线 -->

<u-line color="rgba(0,0,0,0.03);" length="660rpx"/>

<view class="syn_content">

<view class="content1">

<view class="item">

<image src="cloud://ohenv-3gfjcna9629d6f9a.6f68-ohenv-3gfjcna9629d6f9a-1306492505/tip/location.png" mode="widthFix"></image>

<view class="tip">定位清晰</view>

</view>

<view class="item">

<image src="cloud://ohenv-3gfjcna9629d6f9a.6f68-ohenv-3gfjcna9629d6f9a-1306492505/tip/nowater.png" mode="widthFix"></image>

<view class="tip">拒绝掺水</view>

</view>

<view class="item">

<image src="cloud://ohenv-3gfjcna9629d6f9a.6f68-ohenv-3gfjcna9629d6f9a-1306492505/tip/package.png" mode="widthFix"></image>

<view class="tip">包装完整</view>

</view>

</view>

</view>

</view>

<view class="agree">

<u-checkbox-group size="24">

<u-checkbox v-model="checked" shape="circle" size="24" label-size="24">{{agreeStr}}</u-checkbox>

</u-checkbox-group>

</view>

<view class="pay">

<view class="btn">购买服务</view>

</view>

</view>

</view>

</template>

<script>

export default {

data() {

return {

backgroundColor : {

background: '#2B7DE1'

},

list: [

{

name: '月度服务'

}, 

{

name: '季度服务'

}, 

{

name: '半年服务'

},

{

name: '全年服务'

}

],

current: 0,

agreeStr:'同意《回收协议》',

checked:false

}

},

methods: {

//页面跳转方法

navigate(url){

uni.navigateTo({

url,

})

},

//选择商品方法,修改索引

changeSubsection(index){

console.log(index)

}

}

}

</script>

<style lang="scss">

.content{

// position: relative;

// top: -5rpx;

width: 100%;

height: 30vh;

background: linear-gradient(#2B7DE1,#f3eff5);

display: flex;

flex-direction: column;

align-items: center;

.address{

margin-top: 30rpx;

width: 700rpx;

height: 270rpx;

background: #FFFFFF;

border-radius: 20rpx;

display: flex;

flex-direction: column;

.title{

margin: 20rpx;

font-size: 30rpx;

font-weight: bold;

}

.addressInfo{

display: flex;

flex-direction: column;

font-size: 24rpx;

.line{

margin: 10rpx 20rpx;

display: flex;

justify-content: space-between;

}

}

}

.choose{

margin-top: 30rpx;

height: 200rpx;

width: 700rpx;

border-radius: 20rpx;

background: #FFFFFF;

.title{

margin: 20rpx;

font-size: 30rpx;

font-weight: bold;

}

.subsection{

width: 700rpx;

padding: 20rpx 20rpx;

u-subsection{

width: 680rpx;

}

}

}

.service_content{

margin-top: 30rpx;

// height: 500rpx;

width: 700rpx;

display: flex;

flex-direction: column;

align-items: center;

border-radius: 20rpx;

background: #FFFFFF;

.top{

margin: 20rpx 20rpx 30rpx 20rpx;

width: 660rpx;

display: flex;

justify-content: space-between;

.title{

font-size: 26rpx;

}

.tag{

background: #f5aa00;

border-radius: 15rpx;

font-size: 20rpx;

width: 100rpx;

font-weight: bold;

display: flex;

justify-content: center;

align-items: center;

// color: rgba(0,0,0,0.1);

}

}

.service_info{

// margin-top: 10rpx;

margin-bottom: 30rpx;

width: 660rpx;

display: flex;

flex-direction: column;

.line{

display: flex;

justify-content: space-between;

margin: 30rpx 0rpx 0rpx 0rpx;

.left{

display: flex;

// width: 300rpx;

image{

width: 100rpx;

border-radius: 10rpx;

}

.info{

display: flex;

flex-direction: column;

justify-content: space-between;

margin-left: 20rpx;

.name{

font-weight: bold;

}

.tag{

font-size: 24rpx;

color: #C0C0C0;

}

}

}

.right{

font-weight: bold;

}

}

}

.bottom{

margin: 20rpx 20rpx 30rpx 20rpx;

width: 660rpx;

.line{

display: flex;

justify-content: space-between;

}

}

}

.tips{

margin-top: 30rpx;

margin-bottom: 30rpx;

width: 700rpx;

// height: 270rpx;

background: #FFFFFF;

border-radius: 20rpx;

display: flex;

flex-direction: column;

.title{

margin: 20rpx;

font-size: 30rpx;

font-weight: bold;

}

.syn_content{

margin: 30rpx 0rpx;

display: flex;

width: 700rpx;

justify-content: space-between;

.content1{

display: flex;

.item{

display: flex;

flex-direction: column;

flex: 1;

image{

padding: 0rpx 77rpx;

width: 80rpx;

}

.tip{

text-align: center;

font-size: 20rpx;

}

}

}

}

}

.agree{

width: 700rpx;

}

.pay{

margin-top: 30rpx;

padding-bottom: 100rpx;

width: 700rpx;

.btn{

width: 700rpx;

height: 80rpx;

border-radius: 50rpx;

background-color: #2B7DE1;

line-height: 80rpx;

color: #FFFFFF;

text-align: center;

}

}

}

page{

background-color: #f3eff5;

}

</style>

没代码，猜不到