290 lines
6.9 KiB
Vue
290 lines
6.9 KiB
Vue
<template>
|
|
<view class="">
|
|
<view class="count_down">
|
|
还剩<text>00:28:36</text>订单自动取消
|
|
</view>
|
|
<view class="m-card m-address">
|
|
<view class="address-info">
|
|
<view class="top">
|
|
<up-icon name="map"></up-icon>
|
|
<view class="t-name">小王</view>
|
|
<view>155****9999</view>
|
|
</view>
|
|
<view class="bottom u-line-2">
|
|
四川泸州市龙马潭区莲花池街道商业街1号
|
|
</view>
|
|
</view>
|
|
<view class="address-btn">
|
|
<view style="width: 80px;"><up-button @click="showAddress = true" size="small" shape="circle" color="#f6f6f6"
|
|
:customStyle="{color:'#666666'}">修改</up-button></view>
|
|
</view>
|
|
</view>
|
|
<view class="m-card m-good">
|
|
<image class="image" src="../../static/logo.png"></image>
|
|
<view class="body-content">
|
|
<view>
|
|
<view class="title">
|
|
<view>黄牛肉20kg</view>
|
|
<view>¥10.00</view>
|
|
</view>
|
|
<view class="tips">
|
|
<view>我不吃牛肉</view>
|
|
<view>x5</view>
|
|
</view>
|
|
</view>
|
|
<view class="time">
|
|
预计48小时发货
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="m-card good-info">
|
|
<view class="row">
|
|
<view>商品总价 <text>共计5件商品</text></view>
|
|
<view><text>¥</text>50<text>.00</text></view>
|
|
</view>
|
|
<view class="row">
|
|
<view>运费</view>
|
|
<view><text>¥</text>0<text>.00</text></view>
|
|
</view>
|
|
<view class="row-need">
|
|
<view style="margin-right: 10rpx;">需付款</view>
|
|
<view><text>¥</text>50<text>.00</text></view>
|
|
</view>
|
|
</view>
|
|
<view class="m-card good-info">
|
|
<view class="head-title">订单信息</view>
|
|
<view class="row">
|
|
<view>订单编号</view>
|
|
<up-copy content="wxo13546486484784555">
|
|
<text>wxo13546486484784555 | 复制</text>
|
|
</up-copy>
|
|
</view>
|
|
<view class="row">
|
|
<view>下单时间</view>
|
|
<view>2024-04-25 15:00:00</view>
|
|
</view>
|
|
<view class="row" style="margin-bottom: 0;">
|
|
<view>支付状态</view>
|
|
<view class="red">待支付</view>
|
|
</view>
|
|
</view>
|
|
<view style="width: 100%;height: 200rpx;"></view>
|
|
|
|
<view class="btn-box">
|
|
<view style="color: #777777;" @click="showCancel=true">取消订单</view>
|
|
<view style="width: 450rpx;">
|
|
<up-button color="#20B128" shape="circle">立即支付 ¥50.00</up-button>
|
|
</view>
|
|
</view>
|
|
|
|
<up-popup :show="showCancel" closeable round="10" @close="showCancel=false">
|
|
<view class="cancel-popup">
|
|
<view class="head-title">订单取消</view>
|
|
<view class="row" v-for="(item,index) in cancelDict" :key="item.value" @click="cancelType=item.value">
|
|
<view>{{item.name}}</view>
|
|
<image v-if="cancelType==item.value" src="@/static/icon/check.png"></image>
|
|
<image v-else src="@/static/icon/n-check.png"></image>
|
|
</view>
|
|
<up-button color="#20B128" shape="circle" @click="submitCancel">提交</up-button>
|
|
</view>
|
|
</up-popup>
|
|
<addressPopup :show="showAddress" @close="showAddress = false" @change="changeAddress"></addressPopup>
|
|
<modal :show="false" content="您还没有添加收货地址，请点击添加"></modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
import { ref } from "vue";
|
|
import cancelDict from "@/dict/cancelDict.js";
|
|
import addressPopup from "@/components/addressPopup.vue";
|
|
import modal from "@/components/modal.vue";
|
|
|
|
const showCancel = ref(false);
|
|
const showAddress = ref(false);
|
|
|
|
const cancelType = ref(-1); // 取消取消类型
|
|
|
|
const submitCancel = () => {
|
|
showCancel.value = false;
|
|
console.log(cancelType.value);
|
|
uni.showToast({
|
|
title: '取消成功',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
const changeAddress = (e) => {
|
|
showAddress.value = false;
|
|
console.log(e);
|
|
}
|
|
|
|
onLoad((option) => {
|
|
uni.setNavigationBarTitle({
|
|
title: option.type == 1 ? '等待付款' : '订单详情'
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.count_down {
|
|
padding: 20rpx 0;
|
|
text-align: center;
|
|
color: #444444;
|
|
|
|
text {
|
|
color: #F55726;
|
|
padding: 0 10rpx;
|
|
}
|
|
}
|
|
|
|
.m-card {
|
|
width: 710rpx;
|
|
margin: 0 auto;
|
|
background-color: #fff;
|
|
border-radius: 14rpx;
|
|
box-sizing: border-box;
|
|
padding: 20rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.m-address {
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: #999999;
|
|
|
|
.address-info {
|
|
width: 510rpx;
|
|
|
|
.top {
|
|
display: flex;
|
|
font-size: 28rpx;
|
|
|
|
.t-name {
|
|
color: #444;
|
|
margin: 0 10rpx;
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.m-good {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 20rpx;
|
|
|
|
.image {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.body-content {
|
|
width: 490rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
color: #989898;
|
|
|
|
.title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 28rpx;
|
|
color: #444;
|
|
}
|
|
|
|
.tips {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 24rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.time {
|
|
background-color: #F6F6F6;
|
|
padding: 5rpx 10rpx;
|
|
font-size: 26rpx;
|
|
color: #444;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.good-info {
|
|
margin-bottom: 20rpx;
|
|
|
|
.head-title {
|
|
margin-bottom: 18rpx;
|
|
color: #000;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 18rpx;
|
|
|
|
.red {
|
|
color: #F55726;
|
|
}
|
|
}
|
|
|
|
.row-need {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
color: #F55726;
|
|
}
|
|
|
|
text {
|
|
font-size: 22rpx;
|
|
}
|
|
}
|
|
|
|
.btn-box {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 120rpx;
|
|
height: calc(constant(safe-area-inset-bottom) + 120rpx);
|
|
/* 适用于iOS设备 */
|
|
height: calc(env(safe-area-inset-bottom) + 120rpx);
|
|
/* 适用于Android设备 */
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
padding: 20rpx;
|
|
padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
|
|
/* 适用于iOS设备 */
|
|
padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
|
|
/* 适用于Android设备 */
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.cancel-popup {
|
|
padding: 30rpx;
|
|
|
|
.head-title {
|
|
font-weight: bold;
|
|
text-align: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-bottom: 20rpx;
|
|
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |