|
|
@@ -0,0 +1,384 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <!-- 确认订单 -->
|
|
|
+ <view class="content-top">
|
|
|
+ <view class="addressInfo" >
|
|
|
+ <view class="top">
|
|
|
+ <view class="name">{{ addressInfo.name }}</view>
|
|
|
+ <view class="phone">{{ addressInfo.phone }}</view>
|
|
|
+ <!-- <view class="tag">
|
|
|
+ <text v-for="(item, index) in addressInfo.tag" :key="index" :class="{red:item.tagText=='默认'}">{{ item.tagText }}</text>
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ <view class="bottom">
|
|
|
+ {{addressInfo.site}}
|
|
|
+ <u-icon name="edit-pen" :size="40" color="#999999" @click="handleSelecAddress"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content-center">
|
|
|
+ <view class="order">
|
|
|
+ <view class="item" v-for="(item, index) in list" :key="index">
|
|
|
+ <view class="left"><image :src="item.image" mode="aspectFill"></image></view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="title u-line-2">{{ item.title }}</view>
|
|
|
+ <view class="type">{{ item.type }}</view>
|
|
|
+ <!-- <view class="delivery-time">发货时间 {{ item.deliveryTime }}</view> -->
|
|
|
+ <view class="price-row">
|
|
|
+ <view class="count-text">
|
|
|
+ 数量
|
|
|
+ </view>
|
|
|
+ <view class="count">
|
|
|
+ ×{{ item.count }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="price">
|
|
|
+ {{ item.price }}积分
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="navigation">
|
|
|
+ <view class="left">
|
|
|
+ <view class="item">
|
|
|
+ <view class="total">合计：<text style="color: #ff7900;">2条</text></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <view class="buy btn u-line-1" @click="handleSubmit">立即兑换</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ addressInfo: {
|
|
|
+ id: 1,
|
|
|
+ name: '游学中华',
|
|
|
+ phone: '18323455233',
|
|
|
+ tag: [
|
|
|
+ {
|
|
|
+ tagText: '默认'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagText: '家'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ site: '广东省深圳市宝安区 自由路66号'
|
|
|
+ },
|
|
|
+ list: [{
|
|
|
+ price: 35,
|
|
|
+ title: '175/70R14 88T XL SH08 BGSL',
|
|
|
+ count: '100',
|
|
|
+ image: 'https://img12.360buyimg.com/n7/jfs/t16642/126/2693663818/450163/6879e8ce/5b06d93bN6305bd94.png',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ price: 75,
|
|
|
+ title: '175/70R14 88T XL SH08 BGSL',
|
|
|
+ count: '100',
|
|
|
+ image: 'https://img12.360buyimg.com/n7/jfs/t1/47645/22/6120/140457/5d3d17deEec9f8e8d/3687ff03ca89b48c.jpg',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ price: 385,
|
|
|
+ title: '175/70R14 88T XL SH08 BGSL',
|
|
|
+ count: '100',
|
|
|
+ image: 'https://img11.360buyimg.com/n7/jfs/t1/88990/24/4208/105799/5de4c6e9E24bc09d0/f810effb14c9c13a.jpg',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ price: 784,
|
|
|
+ title: '175/70R14 88T XL SH08 BGSL',
|
|
|
+ count: '100',
|
|
|
+ image: 'https://img12.360buyimg.com/n7/jfs/t1/93698/23/4500/114562/5de713dfEfc997085/e8deaa979909851d.jpg',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ price: 7891,
|
|
|
+ title: '175/70R14 88T XL SH08 BGSL',
|
|
|
+ count: '100',
|
|
|
+ image: 'https://img11.360buyimg.com/n7/jfs/t16642/126/2693663818/450163/6879e8ce/5b06d93bN6305bd94.png',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ price: 2341,
|
|
|
+ count: '100',
|
|
|
+ title: '175/70R14 88T XL SH08 BGSL',
|
|
|
+ image: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ price: 661,
|
|
|
+ count: '100',
|
|
|
+ title: '175/70R14 88T XL SH08 BGSL',
|
|
|
+ image: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ price: 1654,
|
|
|
+ title: '175/70R14 88T XL SH08 BGSL',
|
|
|
+ count: '100',
|
|
|
+ image: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ price: 1678,
|
|
|
+ title: '175/70R14 88T XL SH08 BGSL',
|
|
|
+ count: '100',
|
|
|
+ image: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ price: 924,
|
|
|
+ title: '175/70R14 88T XL SH08 BGSL',
|
|
|
+ count: '100',
|
|
|
+ image: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ price: 8243,
|
|
|
+ title: '175/70R14 88T XL SH08 BGSL',
|
|
|
+ count: '100',
|
|
|
+ image: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleSubmit: function(){
|
|
|
+
|
|
|
+ },
|
|
|
+ handleSelecAddress: function(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/me/address"
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .content-top{
|
|
|
+ background-color: #0094FE;
|
|
|
+ padding-bottom: 119rpx;
|
|
|
+ .addressInfo {
|
|
|
+ padding: 40rpx 20rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ width: 712rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ .top {
|
|
|
+ display: flex;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 34rpx;
|
|
|
+ .phone {
|
|
|
+ margin-left: 60rpx;
|
|
|
+ }
|
|
|
+ .tag {
|
|
|
+ display: flex;
|
|
|
+ font-weight: normal;
|
|
|
+ align-items: center;
|
|
|
+ text {
|
|
|
+ display: block;
|
|
|
+ width: 60rpx;
|
|
|
+ height: 34rpx;
|
|
|
+ line-height: 34rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 20rpx;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 30rpx;
|
|
|
+ background-color:rgb(49, 145, 253);
|
|
|
+ }
|
|
|
+ .red{
|
|
|
+ background-color:red
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-center{
|
|
|
+ width: 712rpx;
|
|
|
+ margin: -106rpx auto 0 auto;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ padding: 26rpx;
|
|
|
+ .order {
|
|
|
+ background-color: #ffffff;
|
|
|
+ // margin: 20rpx auto;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ .top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .store {
|
|
|
+ margin: 0 10rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ color: $u-type-warning-dark;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ margin: 20rpx 0 0;
|
|
|
+ .left {
|
|
|
+ margin-right: 20rpx;
|
|
|
+ image {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ .title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ }
|
|
|
+ .type {
|
|
|
+ margin: 10rpx 0;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: $u-tips-color;
|
|
|
+ }
|
|
|
+ .delivery-time {
|
|
|
+ color: #e5d001;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ .price-row{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 10rpx 0;
|
|
|
+ font-size: 26rpx;
|
|
|
+ .price{
|
|
|
+ color: #FF0000;
|
|
|
+ }
|
|
|
+ .exchange{
|
|
|
+ background: #0094FE;
|
|
|
+ color: #FFFFFF;
|
|
|
+ padding: 4rpx 16rpx;
|
|
|
+ line-height: 1.5;
|
|
|
+ },
|
|
|
+ .count-text{
|
|
|
+ color: #999999;
|
|
|
+ font-size: 18rpx;
|
|
|
+ }
|
|
|
+ .count{
|
|
|
+ color: #999999;
|
|
|
+ font-size: 18rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ text-align: right;
|
|
|
+ .decimal {
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ }
|
|
|
+ .number {
|
|
|
+ color: $u-tips-color;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .total {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ text-align: right;
|
|
|
+ font-size: 24rpx;
|
|
|
+ .total-price {
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .btn {
|
|
|
+ line-height: 52rpx;
|
|
|
+ width: 160rpx;
|
|
|
+ border-radius: 26rpx;
|
|
|
+ border: 2rpx solid $u-border-color;
|
|
|
+ font-size: 26rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: $u-type-info-dark;
|
|
|
+ }
|
|
|
+ .evaluate {
|
|
|
+ color: $u-type-warning-dark;
|
|
|
+ border-color: $u-type-warning-dark;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+.navigation {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 100rpx;
|
|
|
+ border: solid 2rpx #f2f2f2;
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 16rpx 0;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 100;
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ // font-size: 20rpx;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ margin: 0 30rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .total{
|
|
|
+ font: 34rpx;
|
|
|
+ }
|
|
|
+ &.car {
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .car-num {
|
|
|
+ position: absolute;
|
|
|
+ top: -10rpx;
|
|
|
+ right: -10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ font-size: 28rpx;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ line-height: 66rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ border-radius: 36rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cart {
|
|
|
+ background-color: #ed3f14;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .buy {
|
|
|
+ margin: 0 16rpx;
|
|
|
+ background-color: #ff7900;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
caojunjie