jzmall_uni/pages/upgrade/confirmOrder/confirmOrder.vue

<template>
    <view class="container">
        <!-- 地址 -->
        <view class="address-block">
            <view class="tips">
                <image src="https://mall.zhaijieshi.cc/file/jzmall-dy/icon-map.png" mode="aspectFit"></image>
                <view>您当前所在地址</view>
            </view>
            <view class="detail">上海市浦东新区祖冲之路1505弄100号3幢鲸致生活</view>
        </view>
        <!-- 商品 -->
        <view class="product-block">
            <view class="title">
                <text class="jzsh">鲸致生活</text>
                <text>家政·保洁·家电蒸洗·擦窗·开荒·保姆·收纳·搬家·月嫂</text>
            </view>
            <view class="product-detail">
                <view class="profuct-info">
                    <image mode="aspectFit" class="product-img" src="https://mall.zhaijieshi.cc/file/jzmall-dy/product-default.png"></image>
                    <view class="info-right">
                        <view class="product-name">【新客专享】全屋精细保洁3小时</view>
                        <view class="remark">为更好的服务体验，建议提前1天预约！</view>
                    </view>
                </view>
                <view class="old-price">¥178</view>
                <view class="new-price">
                    <text>小计:</text>
                    <text class="amount">￥129</text>
                </view>
            </view>
        </view>
        <!-- 购买份数 -->
        <view class="extra-info">
            <view class="buy-num">
                <view>购买份数</view>
                <view>共1件</view>
            </view>
            <view class="coupon-info">
                <view class="coupon-title">
                    <image src="https://mall.zhaijieshi.cc/file/jzmall-dy/icon-coupon.png" mode="aspectFit"></image>
                    <view>优惠</view>
                </view>
                <view class="coupon-select">
                    <view>暂无可用优惠</view>
                    <view class="select-right">
                        <view>0张</view>
                        <image src="https://mall.zhaijieshi.cc/file/jzmall-dy/order-arrow.png" mode="aspectFit" class="arrow"></image>
                    </view>
                </view>
            </view>
        </view>
        <!-- 手机号 -->
        <view class="phone-block">
            <view class="red-dot">*</view>
            <view>手机号码</view>
            <input placeholder="请输入预约手机号" class="phone-input" placeholder-style="font-size:26rpx;color:#666" maxlength="11" type="num" />
        </view>
        <!-- <view class="buy-tips">
    * 此商品仅限北京、上海、广州、深圳、杭州、南京、苏州、青岛、   成都、重庆、苏州城市使用，其他城市正在陆续开放中…
  </view> -->

        <!-- 提交按钮 -->
        <view class="go-pay-wrapper">
            <view class="btn-left">
                <text class="num">共1件</text>
                <text class="total">合计：</text>
                <text class="rmb">¥</text>
                <text class="price">129</text>
            </view>
            <view class="btn-right">提交订单</view>
        </view>
    </view>
</template>

<script>
//获取应用实例
const app = getApp();
export default {
    data() {
        return {};
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    methods: {}
};
</script>
<style>
.container {
    padding: 30rpx 24rpx 160rpx;
}
view,
text {
    font-size: 30rpx;
    color: #333;
}
.address-block {
    width: 690rpx;
    background: #ffffff;
    border-radius: 10rpx;
    padding: 30rpx 20rpx 24rpx;
}
.address-block .tips {
    display: flex;
    align-items: center;
    height: 30rpx;
}
.tips image {
    width: 30rpx;
    height: 30rpx;
    margin-right: 10rpx;
}
.tips view {
    line-height: 30rpx;
    font-size: 30rpx;
}
.address-block .detail {
    padding-left: 38rpx;
    margin-top: 18rpx;
    line-height: 40rpx;
    font-size: 26rpx;
}
.product-block {
    width: 690rpx;
    background: #ffffff;
    border-radius: 10rpx;
    padding: 0 20rpx 20rpx;
    margin: 20rpx 0;
}
.product-block .title {
    height: 62rpx;
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #efefef;
    margin-bottom: 20rpx;
}
.product-block .title text {
    font-size: 22rpx;
    color: #666;
    /* font-weight: lighter; */
}
.product-block .title .jzsh {
    font-weight: normal;
    margin-right: 8rpx;
}
.profuct-info {
    height: 160rpx;
    display: flex;
    align-items: flex-start;
}
.product-img {
    width: 160rpx;
    height: 160rpx;
    border-radius: 10rpx;
    /* margin-right:20rpx; */
}
.info-right {
    padding-top: 16rpx;
}
.product-name {
    line-height: 40rpx;
    margin-bottom: 24rpx;
    font-size: 30rpx;
    padding-left: 20rpx;
    text-indent: -16rpx;
}
.info-right .remark {
    font-size: 22rpx;
    color: #666;
    padding-left: 20rpx;
}
.old-price {
    margin: 20rpx 0;
    height: 22rpx;
    line-height: 22rpx;
    color: #666;
    font-size: 26rpx;
    text-decoration: line-through;
    text-align: right;
}
.new-price {
    width: 650rpx;
    height: 40rpx;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}
.new-price text {
    font-size: 26rpx;
    line-height: 26rpx;
}
.new-price text.amount {
    font-weight: bold;
    font-size: 38rpx;
    line-height: 30rpx;
    margin-left: 8rpx;
}
.extra-info {
    width: 690rpx;
    height: 234rpx;
    background: #ffffff;
    border-radius: 10rpx;
    padding: 30rpx 20rpx 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.buy-num {
    display: flex;
    justify-content: space-between;
    height: 30rpx;
    line-height: 30rpx;
}
.coupon-title {
    height: 30rpx;
    display: flex;
    align-items: center;
}
.coupon-title image {
    width: 26rpx;
    height: 26rpx;
    margin-right: 10rpx;
}
.coupon-select {
    height: 46rpx;
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.coupon-select view {
    font-size: 26rpx;
    color: #999;
}
.select-right {
    height: 46rpx;
    display: flex;
    align-items: center;
}
.arrow {
    width: 20rpx;
    height: 20rpx;
    margin-left: 8rpx;
}
.phone-block {
    width: 690rpx;
    height: 90rpx;
    background: #ffffff;
    border-radius: 10rpx;
    margin: 20rpx 0 14rpx;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
}
.red-dot {
    color: red;
    margin-right: 8rpx;
}
.phone-input {
    flex: 1;
    text-align: right;
}

.buy-tips {
    font-size: 22rpx;
    color: #666;
    line-height: 34rpx;
    padding: 0 30rpx 0 20rpx;
}

.go-pay-wrapper {
    position: fixed;
    bottom: 56rpx;
    left: 30rpx;
    right: 30rpx;
    height: 90rpx;
    width: 690rpx;
    border-radius: 90rpx;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.btn-left {
    width: 486rpx;
    background: #000;
    display: flex;
    height: 90rpx;
    padding: 8rpx 0 0 42rpx;
    align-items: center;
}
.btn-left .num {
    font-size: 22rpx;
    color: #fff;
    margin-right: 10rpx;
}
.btn-left .total {
    font-size: 22rpx;
    color: #fff;
}
.btn-left .rmb {
    font-weight: bold;
    font-size: 24rpx;
    color: #fff;
    margin-top: -6rpx;
}
.btn-left .price {
    font-weight: bold;
    font-size: 32rpx;
    color: #fff;
    margin-top: -6rpx;
}
.go-pay-wrapper .btn-right {
    background: #00b9ff;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    color: #fff;
    width: 204rpx;
    font-size: 30rpx;
}
view.go-pay-wrapper button > view {
    color: #fff;
}
</style>