地址管理、支付成功、待支付商品选择

src/pages.json

@@ -516,8 +516,24 @@
 					"style": {
 						"navigationBarTitleText": "商品详情",
 						"navigationStyle": "custom"
-						
-						
+					}
+				},{
+					"path": "productDetails/addressManagement",
+					"style": {
+						"navigationBarTitleText": "地址管理",
+						"navigationStyle": "custom"
+					}
+				},{
+					"path": "productDetails/paymentSuccessful",
+					"style": {
+						"navigationBarTitleText": "兑换成功",
+						"navigationStyle": "custom"
+					}
+				},{
+					"path": "productDetails/pendingPayment",
+					"style": {
+						"navigationBarTitleText": "待支付",
+						"navigationStyle": "custom"
 					}
 				}
 			]

src/points/productDetails/addressManagement.vue

@@ -0,0 +1,242 @@
+<template>
+    <view>
+        <scroll-view :scroll-y="true" @scroll="handleContentScroll">
+            <!-- 导航栏  :leftIconColor="!isTop ? '#fff' : '#000'"-->
+            <u-navbar :placeholder="true" autoBack @click="autoBackFun">
+                <view slot="center">
+                    <view class="center" style="background-color: #fff;">我的地址</view>
+                </view>
+            </u-navbar>
+
+            <view class="content">
+                <view class="item" v-for="item in list">
+                    <view class="addressName">{{ item.addressName }}</view>
+                    <view style="display: flex;justify-content: space-between;align-items: center;">
+                        <view style="display: flex;align-items: center;">
+                            <text class="userName"> {{ item.userName }}</text>
+                            <text class="userPhone">{{ item.userPhone }}</text>
+                            <text v-if=item.defaultAddress class="defaultAddress">{{ item.defaultAddress }}</text>
+                        </view>
+                        <view style="display: flex;align-items: center;">
+                            <image style="width: 40rpx;height: 40rpx;" src="@/static/points/editIcon.png" mode="" @click="goEditAddress">
+                            </image>
+                            <image style="width: 40rpx;height: 40rpx;margin-left: 20rpx;"
+                                src="@/static/points/deleteIcon.png" mode="">
+                            </image>
+
+                        </view>
+                    </view>
+
+
+                </view>
+            </view>
+
+
+
+
+            <view class="footer-bar">
+                <u-button :customStyle="{
+                    color: '#fff',
+                    background: '#03C1B8'
+                }" @click="redeemNowFun">新增地址</u-button>
+            </view>
+
+           
+            <u-popup :show="selectProductShowPopup" mode="bottom" round="10">
+                <!-- <SelectProduct ref="selectProductRef" @closeSelectProduct="closeSelectProduct"></SelectProduct> -->
+            </u-popup>
+
+        </scroll-view>
+
+    </view>
+</template>
+
+<script>
+
+export default {
+    components: {},
+    data() {
+        return {
+            isTop: 0,
+            redemptionRulesShowPopup: false,
+            selectProductShowPopup: false,
+            list: [
+                {
+                    addressName: '迎泽西大街86号信达国际金融中心',
+                    userName: '郭丽丽',
+                    userPhone: '16635680981',
+                    defaultAddress: '默认',
+                }, {
+                    addressName: '迎泽西大街86号信达国际金融中心',
+                    userName: '郭丽丽',
+                    userPhone: '16635680981',
+                }, {
+                    addressName: '迎泽西大街86号信达国际金融中心',
+                    userName: '郭丽丽',
+                    userPhone: '16635680981',
+                }, {
+                    addressName: '迎泽西大街86号信达国际金融中心',
+                    userName: '郭丽丽',
+                    userPhone: '16635680981',
+                }, {
+                    addressName: '迎泽西大街86号信达国际金融中心',
+                    userName: '郭丽丽',
+                    userPhone: '16635680981',
+                },
+            ]
+
+
+        }
+    },
+    onLoad(data) {
+
+    },
+    onShow() {
+
+    },
+    onPageScroll(e) {
+        //console.log("滚动距离为：" + e.scrollTop);
+        this.isTop = e.scrollTop;
+    },
+
+    methods: {
+        handleContentScroll(e) {
+            this.isTop = e.detail.scrollTop > 0
+        },
+        clichFun() {
+
+        },
+        //立即兑换
+        redeemNowFun() {
+
+        },
+        //返回上一页
+        autoBackFun(){
+            uni.navigateBack();
+        },
+        //去编辑地址
+        goEditAddress() {
+            uni.redirectTo({
+                url: '/pages/address/address-edit'
+            });
+            // /let str = uni.$u.queryParams(params);
+            // uni.navigateTo({
+            // 	url: `/packageA/pages/shop/coupon/couponDetail${str}`
+            // });
+        },
+
+    }
+}
+</script>
+
+<style></style>
+<style lang="scss" scoped>
+.footer-bar {
+    .u-button {
+        width: 670rpx;
+        height: 84rpx;
+        border-radius: 98rpx 98rpx 98rpx 98rpx;
+        margin: 20rpx 40rpx;
+        background: '#000';
+        font-weight: 500;
+        font-size: 32rpx;
+        color: #FFFFFF;
+        line-height: 36rpx;
+        text-align: center;
+        font-style: normal;
+        text-transform: none;
+        
+
+    }
+}
+
+.content {
+    background-color: #F8F8F8;
+    padding: 32rpx;
+    font-family: PingFang SC, PingFang SC;
+
+    .item {
+        background: #FFFFFF;
+        box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(88, 209, 187, 0.05);
+        border-radius: 20rpx 20rpx 20rpx 20rpx;
+        padding: 32rpx 24rpx;
+        margin-bottom: 24rpx;
+    }
+
+    .addressName {
+        font-weight: 500;
+        font-size: 32rpx;
+        color: #2F3437;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+        margin-bottom: 16rpx;
+    }
+
+    .userName {
+        font-weight: 400;
+        font-size: 26rpx;
+        color: #333333;
+        line-height: 24rpx;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+
+    .userPhone {
+        font-weight: 400;
+        font-size: 26rpx;
+        color: #999999;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+        margin-left: 20rpx;
+    }
+
+    .defaultAddress {
+        font-weight: 400;
+        font-size: 24rpx;
+        color: #F35031;
+        text-align: center;
+        font-style: normal;
+        text-transform: none;
+        width: 72rpx;
+        height: 40rpx;
+        background: rgba(243, 80, 49, 0.1);
+        border-radius: 8rpx 8rpx 8rpx 8rpx;
+        margin-left: 20rpx;
+    }
+
+
+}
+
+.popupClass {
+    background-color: #F5F8F8;
+    padding: 24rpx 32rpx 0 32rpx;
+    font-family: PingFang SC, PingFang SC;
+
+    .niticeClass {
+        background: #FFFFFF;
+        border-radius: 20rpx 20rpx 20rpx 20rpx;
+        margin-top: 24rpx;
+        padding: 24rpx;
+        position: relative;
+
+        .title {
+            font-weight: 800;
+            font-size: 28rpx;
+            color: #333333;
+            line-height: 28rpx;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+            width: 686rpx;
+            margin: 24rpx 0;
+        }
+
+        .text {
+            color: #999999;
+        }
+    }
+}
+</style>

src/points/productDetails/selectProduct.vue → src/points/productDetails/components/selectProduct.vue

@@ -1,12 +1,12 @@
 <template>
     <view class="content">
         <image style="width: 35rpx;height: 35rpx;position: absolute;right: 40rpx;top:40rpx" @click="closeSelectProduct"
-            src="@/static/points/closeIcon.png" mode="" ></image>
+            src="@/static/points/closeIcon.png" mode=""></image>
         <view class="addressBox">
             <uni-icons class="icon location icon-cuo" type="location" size="20" @tap=""></uni-icons>
             <text class="name">张三</text>
             <text class="address">山西省太原市小店区营盘街道某某小区</text>
-            <image style="width: 28rpx;height: 28rpx;position: absolute;right: 0;" @click="clichFun"
+            <image style="width: 28rpx;height: 28rpx;position: absolute;right: 0;" @click="addressSelectFun"
                 src="@/static/points/Keyboard_arrow_rifht.png" mode=""></image>
 
         </view>
@@ -14,8 +14,8 @@
             <view style="display:flex;justify-content: space-between;">
                 <view style="display:flex;">
                     <view>
-                        <image style="width: 120rpx;height: 120rpx;" @click="clichFun"
-                            src="@/static/points/closeIcon.png" mode=""></image>
+                        <image style="width: 120rpx;height: 120rpx;" src="@/static/points/closeIcon.png" mode="">
+                        </image>
                     </view>
                     <view
                         style="margin-left: 24rpx;display: flex;flex-direction: column;justify-content: space-between;">
@@ -37,11 +37,11 @@
             </view>
             <view class="title" style="margin-top: 24rpx;">尺码（2）</view>
             <view style="display: flex;flex-wrap: wrap;">
-                <view class="specCombination" :class="value == 4 ? 'active' : ''" v-for="value in 2">
+                <view class="specCombination" :class="value == 2 ? 'active' : ''" v-for="value in 2">
                     普通大号 - 1000ML
                 </view>
             </view>
-            
+
         </view>
         <!--运费 -->
         <view class="yunFeiClass">
@@ -87,8 +87,15 @@ export default {
     },
 
     methods: {
-        closeSelectProduct(){
+        //关闭选择商品页
+        closeSelectProduct() {
             this.$emit('closeSelectProduct')
+        },
+        //去我的地址页面
+        addressSelectFun() {
+             uni.redirectTo({
+                url: '/points/productDetails/addressManagement'
+            });
         }
 
     }
@@ -153,7 +160,7 @@ export default {
             text-align: left;
             font-style: normal;
             text-transform: none;
-           
+
         }
 
         .deletePrice {
@@ -234,24 +241,29 @@ export default {
         height: 92rpx;
         background: #FFFFFF;
         border-radius: 20rpx 20rpx 20rpx 20rpx;
-        font-weight: 500;
-        font-size: 28rpx;
-        color: #666666;
-        line-height: 40rpx;
-        text-align: left;
         display: flex;
         align-items: center;
+        justify-content: space-between;
 
-        input {
+        .text {
+            width: 115rpx;
             font-weight: 500;
             font-size: 28rpx;
+            color: #666666;
+            line-height: 40rpx;
+            text-align: left;
+
+        }
+
+        input {
+            font-weight: 500;
+            font-size: 26rpx;
             color: #999999;
             line-height: 40rpx;
             text-align: right;
             font-style: normal;
             text-transform: none;
-            margin-left: 54rpx;
-            width: 472rpx;
+            width: 450rpx;
         }
     }
 }

src/points/productDetails/index.vue

@@ -37,16 +37,18 @@
               <ImageItem class="imgClass" v-for="item in 3" src="/static/points/Group6.png" />
             </view>
             <view style="display: flex;align-items: center;">
-              <text style="color: 666666;">已选：白色，大号</text>
-              <ImageItem style="width: 28rpx;height: 28rpx;margin-left: 8rpx;"
-                src="/static/points/Keyboard_arrow_rifht.png" />
+              <text style="color: 666666;margin-right: 8rpx;">已选：白色，大号</text>
+              <image style="width: 28rpx;height: 28rpx;" @click="selectProductShowFun"
+                  src="@/static/points/Keyboard_arrow_rifht.png" mode=""></image>
             </view>
           </view>
           <view class="arriveAddressClass">
             <text style="color: 666666;margin-right: 24rpx;">送至</text>
             <text>山西省太原市万柏林区</text>
-            <ImageItem style="width: 28rpx;height: 28rpx;position: absolute;right: 0;"
-              src="/static/points/Keyboard_arrow_rifht.png" />
+            <span style="position: absolute;right: 0;">
+              <image style="width: 28rpx;height: 28rpx;" @click="addressSelectFun"
+                src="@/static/points/Keyboard_arrow_rifht.png" mode=""></image>
+            </span>
           </view>
           <view class="seedAddressClass">
             <text style="color: 666666;margin-right: 24rpx;">发货</text>
@@ -123,8 +125,8 @@
 
 <script>
 import ImageItem from "@/components/swiper/components/image.vue";
-import RedemptionRules from "./redemptionRules.vue";
-import SelectProduct from "./selectProduct.vue";
+import RedemptionRules from "./components/redemptionRules.vue";
+import SelectProduct from "./components/selectProduct.vue";
 
 export default {
   components: { ImageItem, RedemptionRules, SelectProduct },
@@ -152,16 +154,30 @@ export default {
     handleContentScroll(e) {
       this.isTop = e.detail.scrollTop > 0
     },
+    //兑换须知页面
     clichFun() {
       this.redemptionRulesShowPopup = true
     },
     //立即兑换
     redeemNowFun() {
+      uni.redirectTo({
+        url: '/points/productDetails/paymentSuccessful'
+      });
+    },
+    //打开选择商品页
+    selectProductShowFun() {
       this.selectProductShowPopup = true
     },
-    closeSelectProduct(){
+
+    closeSelectProduct() {
       this.selectProductShowPopup = false
     },
+    //去我的地址页面
+    addressSelectFun() {
+      uni.redirectTo({
+        url: '/points/productDetails/addressManagement'
+      });
+    },
 
     //导航栏返回按钮
     leftClick() {
@@ -191,7 +207,12 @@ export default {
     height: 84rpx;
     border-radius: 98rpx 98rpx 98rpx 98rpx;
     margin: 20rpx 40rpx;
-    background: '#000';
+    font-weight: bold;
+    font-size: 32rpx;
+    line-height: 36rpx;
+    text-align: center;
+    font-style: normal;
+    text-transform: none;
 
   }
 }
@@ -292,7 +313,7 @@ export default {
       display: flex;
       align-items: center;
       justify-content: space-between;
-
+      position: relative;
       .imgClass {
         width: 64rpx;
         height: 64rpx;

src/points/productDetails/paymentSuccessful.vue

@@ -0,0 +1,288 @@
+<template>
+    <view>
+        <scroll-view :scroll-y="true" @scroll="handleContentScroll">
+            <!-- 导航栏  :leftIconColor="!isTop ? '#fff' : '#000'"-->
+            <u-navbar :placeholder="true" autoBack @click="autoBackFun">
+                <view slot="center">
+                    <view class="centerTitle" style="background-color: #fff;">{{ title }}</view>
+                </view>
+            </u-navbar>
+
+            <view class="content">
+                <view class="contentBox">
+                    <view class="successClass">
+                        <view style="margin-top: 36rpx;">
+                            <image style="width: 320rpx;height: 172rpx;" @click="selectProductShowFun"
+                                src="@/static/points/successIcon.png" mode=""></image>
+                        </view>
+                        <view class="payStatus"> 商品兑换成功</view>
+                        <view class="promiseSeedTime">我们将在3个工作日寄出 </view>
+                    </view>
+                    <view style="height: 2rpx;background-color: #f0f0f0;margin-top: 40rpx;"> </view>
+
+                    <view class="address">
+                        <view class="shxx">收获信息</view>
+                        <view class="addressBox">
+                            <image style="width: 45rpx;height: 40rpx;" @click="addressSelectFun"
+                                src="@/static/points/addressIcon.png" mode=""></image>
+                            <view style="margin-left: 16rpx;">
+                                <view class="name">
+                                    张三 <text>
+                                        15032624563</text>
+                                </view>
+                                <view class="address">
+                                    山西省太原市小店区营盘街道某某小区1号楼1单元101
+                                </view>
+                            </view>
+
+                        </view>
+
+                    </view>
+                </view>
+
+            </view>
+            <view class="buttonClass">
+                <u-button :customStyle="{
+                    color: '#fff',
+                    background: '#03C1B8'
+                }" @click="goHome">返回首页</u-button>
+
+                <u-button :customStyle="{
+                    color: '#03C1B8 ',
+                    background: ''
+                }" @click="checkOrder">查看订单</u-button>
+            </view>
+
+        </scroll-view>
+
+    </view>
+</template>
+
+<script>
+
+export default {
+    components: {},
+    data() {
+        return {
+            title: '兑换成功',
+            isTop: 0,
+            redemptionRulesShowPopup: false,
+            selectProductShowPopup: false,
+            list: [
+                {
+                    addressName: '迎泽西大街86号信达国际金融中心',
+                    userName: '郭丽丽',
+                    userPhone: '16635680981',
+                    defaultAddress: '默认',
+                }, {
+                    addressName: '迎泽西大街86号信达国际金融中心',
+                    userName: '郭丽丽',
+                    userPhone: '16635680981',
+                }, {
+                    addressName: '迎泽西大街86号信达国际金融中心',
+                    userName: '郭丽丽',
+                    userPhone: '16635680981',
+                }, {
+                    addressName: '迎泽西大街86号信达国际金融中心',
+                    userName: '郭丽丽',
+                    userPhone: '16635680981',
+                }, {
+                    addressName: '迎泽西大街86号信达国际金融中心',
+                    userName: '郭丽丽',
+                    userPhone: '16635680981',
+                },
+            ]
+
+
+        }
+    },
+    onLoad(data) {
+
+    },
+    onShow() {
+
+    },
+    onPageScroll(e) {
+        //console.log("滚动距离为：" + e.scrollTop);
+        this.isTop = e.scrollTop;
+    },
+
+    methods: {
+        handleContentScroll(e) {
+            this.isTop = e.detail.scrollTop > 0
+        },
+        clichFun() {
+
+        },
+        //返回首页
+        goHome() {
+            uni.switchTab({
+                url: '/pages/index/index'
+            });
+        },
+        //查看订单
+        checkOrder() {
+            uni.redirectTo({
+                url: '/points/productDetails/pendingPayment'
+            });
+        },
+        //返回上一页
+        autoBackFun() {
+            uni.navigateBack();
+        },
+        //去编辑地址
+        goEditAddress() {
+            uni.redirectTo({
+                url: '/pages/address/address-edit'
+            });
+            // /let str = uni.$u.queryParams(params);
+            // uni.navigateTo({
+            // 	url: `/packageA/pages/shop/coupon/couponDetail${str}`
+            // });
+        },
+
+    }
+}
+</script>
+
+<style></style>
+<style lang="scss" scoped>
+.footer-bar {
+    .u-button {
+        width: 670rpx;
+        height: 84rpx;
+        border-radius: 98rpx 98rpx 98rpx 98rpx;
+        margin: 20rpx 40rpx;
+        background: '#000';
+        font-weight: 500;
+        font-size: 32rpx;
+        color: #FFFFFF;
+        line-height: 36rpx;
+        text-align: center;
+        font-style: normal;
+        text-transform: none;
+
+
+    }
+}
+
+.centerTitle {
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500;
+    font-size: 34rpx;
+    color: #060606;
+    text-align: center;
+    font-style: normal;
+    text-transform: none;
+}
+
+.buttonClass {
+    display: flex;
+    padding: 32rpx;
+    font-family: PingFang SC, PingFang SC;
+
+    button {
+        width: 288rpx;
+        height: 84rpx;
+        border-radius: 98rpx 98rpx 98rpx 98rpx;
+        border: 2rpx solid #03C1B8;
+    }
+
+}
+
+.content {
+    background-color: #F8F8F8;
+    padding: 32rpx;
+    font-family: PingFang SC, PingFang SC;
+    //height: 658rpx;
+    border-radius: 20rpx 20rpx 20rpx 20rpx;
+
+
+    .contentBox {
+        padding: 32rpx;
+        width: 686rpx;
+        height: 658rpx;
+        background: #FFFFFF;
+        border-radius: 20rpx 20rpx 20rpx 20rpx;
+    }
+
+    .successClass {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background: #FFFFFF;
+        border-radius: 20rpx 20rpx 20rpx 20rpx;
+
+    }
+
+    .payStatus {
+        font-weight: bold;
+        font-size: 36rpx;
+        color: #333333;
+        line-height: 36rpx;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+        margin-top: 32rpx;
+    }
+
+    .promiseSeedTime {
+        font-weight: 500;
+        font-size: 28rpx;
+        color: #999999;
+        line-height: 40rpx;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+        margin-top: 24rpx;
+    }
+
+    .address {
+        .shxx {
+            margin-top: 20rpx;
+            font-weight: bold;
+            font-size: 28rpx;
+            color: #333333;
+            line-height: 40rpx;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+        }
+
+        .addressBox {
+            margin-top: 24rpx;
+            display: flex;
+            align-items: flex-start;
+
+            .name {
+                font-weight: 500;
+                font-size: 32rpx;
+                color: #333333;
+                line-height: 40rpx;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+
+            }
+
+            .address {
+                margin-top: 8rpx;
+                font-weight: 500;
+                font-size: 28rpx;
+                color: #666666;
+                line-height: 40rpx;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+            }
+
+        }
+
+
+    }
+
+
+
+
+}
+</style>

src/points/productDetails/pendingPayment.vue

@@ -0,0 +1,554 @@
+<template>
+    <view>
+        <scroll-view :scroll-y="true" @scroll="handleContentScroll">
+            <u-navbar :placeholder="true" autoBack @click="autoBackFun">
+                <view slot="center">
+                    <view class="centerTitle" style="background-color: #fff;">{{ title }}</view>
+                </view>
+            </u-navbar>
+
+            <view class="contentBox">
+                <view class="remainingTime">
+                    {{ orderStatus }}
+                </view>
+                <view class="content">
+                    <view class="addressBox">
+                        <image style="width: 45rpx;height: 40rpx;" @click="addressSelectFun"
+                            src="@/static/points/addressIcon.png" mode=""></image>
+                        <view style="margin-left: 16rpx;">
+                            <view class="name">
+                                张三 <text>
+                                    15032624563</text>
+                            </view>
+                            <view class="address">
+                                山西省太原市小店区营盘街道某某小区1号楼1单元101
+                            </view>
+                        </view>
+
+                    </view>
+
+                    <image style="width: 35rpx;height: 35rpx;position: absolute;right: 40rpx;top:40rpx"
+                        @click="closeSelectProduct" src="@/static/points/closeIcon.png" mode=""></image>
+
+                    <view class="productPrice">
+                        <view style="display:flex;">
+                            <view>
+                                <image style="width: 120rpx;height: 120rpx;" src="@/static/points/closeIcon.png"
+                                    mode="">
+                                </image>
+                            </view>
+                            <view
+                                style="margin-left: 24rpx;display: flex;flex-direction: column;justify-content: space-between;">
+                                <view class="productName">广誉源会员定制玻璃杯 </view>
+                                <view class="spec">已选:大号,白色 </view>
+                                <view class="price">实付价 ￥10元+1000积分 </view>
+
+                            </view>
+                        </view>
+                        <view class="productPrice1">
+                            <view class="text">商品金额</view>
+                            <view class="price">￥10 +1000积分</view>
+                        </view>
+                        <view class="shippingFee">
+                            <view class="text">运费</view>
+                            <view class="text">￥0</view>
+                        </view>
+                        <view style="height: 2rpx;background-color: #f0f0f0;margin-top: 20rpx;"> </view>
+                        <view class="total">
+                            <text class="text">合计：</text>
+                            <text class="price">¥ 10</text>
+                        </view>
+                    </view>
+                    <view class="weiChect">
+                        <view class="text">微信支付</view>
+                        <view class="text">微信支付</view>
+                    </view>
+                    <view class="orderInfo">
+                        <view class="item">
+                            <view class="text">订单编号</view>
+                            <view class="text1">246453782748937746</view>
+                        </view>
+                        <view class="item">
+                            <view class="text">下单时间</view>
+                            <view class="text1">2025-09-14 17:21:55</view>
+                        </view>
+                        <view class="item">
+                            <view class="text">支付方式</view>
+                            <view class="text1">现金</view>
+                        </view>
+                        <view class="item">
+                            <view class="text">订单备注</view>
+                            <view class="text1">无</view>
+                        </view>
+
+                    </view>
+
+
+                </view>
+            </view>
+            <view class="buttonClass">
+                <u-button v-if="title=='待支付'" :customStyle="{
+                    color: '#999',
+                    background: ''
+                }" @click="cancelOrderFun">取消支付</u-button>
+
+                <u-button v-if="title=='待支付'" :customStyle="{
+                    color: '#fff ',
+                    background: '#03C1B8'
+                }" @click="checkOrder">去付款</u-button>
+
+                <u-button v-if="title=='订单取消'" :customStyle="{
+                    color: '#fff ',
+                    background: '#03C1B8'
+                }" @click="checkOrder">再次购买</u-button>
+            </view>
+
+        </scroll-view>
+
+
+        <!-- 取消订单 <u-line></u-line>-->
+        <u-popup :show="cancelOrderShowPopup" mode="bottom" round="10">
+            <view class="content">
+
+            </view>
+
+            <view class="popup-con">
+                <!-- 标题 -->
+                <view class="popup-text">
+                    <text>取消订单</text>
+                    <text @click="cancelOrderShowPopup = false">取消</text>
+                </view>
+                <!-- 项目列表 -->
+                <view class="refund-items">
+                    <view class="reason">请选择退款原因</view>
+                    <u-radio-group v-model="pay" @change="groupChange">
+
+                        <view style="padding: 0 20rpx 24rpx 20rpx;">
+                            <view class="radioBox">
+                                <u-radio activeColor="#03C1B8 " name='1'></u-radio>买错了/不想要
+                            </view>
+                            <view class="radioBox">
+                                <u-radio activeColor="#03C1B8 " name='2'></u-radio> 商品无货
+                            </view>
+                            <view class="radioBox">
+                                <u-radio activeColor="#03C1B8 " name='3'></u-radio> 商品信息填写错误
+                            </view>
+                            <view class="radioBox">
+                                <u-radio activeColor="#03C1B8 " name='4'></u-radio> 地址信息填写错误
+                            </view>
+                            <view class="radioBox">
+                                <u-radio activeColor="#03C1B8 " name='5'></u-radio> 其他原因
+                            </view>
+                        </view>
+                    </u-radio-group>
+
+                </view>
+                <view class="popupButtonClass">
+                    <u-button :customStyle="{
+                        color: '#999',
+                        background: '#eee'
+                    }" @click="cancelOrderSubmit">提交</u-button>
+                </view>
+            </view>
+
+
+
+        </u-popup>
+
+    </view>
+
+
+
+
+
+</template>
+
+<script>
+
+export default {
+    components: {},
+    data() {
+        return {
+            title: '待支付',
+            cancelOrderShowPopup: false,
+            orderStatus: '剩余时间 14:59', //超时未支付
+
+
+
+        }
+    },
+    onLoad(data) {
+
+    },
+    onShow() {
+
+    },
+    onPageScroll() {
+    },
+
+    methods: {
+        //取消订单提交按钮
+        cancelOrderSubmit() {
+            this.cancelOrderShowPopup = false
+            this.title='订单取消'
+            this.orderStatus='您已取消支付'
+        },
+        //关闭取消订单选择页
+        closeCancelOrderFun() {
+            this.cancelOrderShowPopup = false
+        },
+        //取消订单
+        cancelOrderFun() {
+            this.cancelOrderShowPopup = true
+        },
+        //去我的地址页面
+        addressSelectFun() {
+            uni.redirectTo({
+                url: '/points/productDetails/addressManagement'
+            });
+        }
+
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.centerTitle {
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500;
+    font-size: 34rpx;
+    color: #060606;
+    text-align: center;
+    font-style: normal;
+    text-transform: none;
+}
+
+
+
+.buttonClass {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    font-family: PingFang SC, PingFang SC;
+
+    button {
+        width: 168rpx;
+        display: flex;
+        align-items: center;
+        height: 56rpx;
+        line-height: 40rpx;
+        border-radius: 98rpx 98rpx 98rpx 98rpx;
+        border: 2rpx solid #03C1B8;
+        font-size: 26rpx;
+        padding: 0 0 10rpx 0;
+        margin: 0 32rpx 0 0;
+    }
+}
+
+.contentBox {
+    background-image: url("@/static/points/orderBg.png");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-color: #F5F8F8;
+    padding-top: 54rpx;
+
+    .remainingTime {
+        font-weight: 500;
+        font-size: 32rpx;
+        color: #FFFFFF;
+        line-height: 40rpx;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+        text-align: center;
+    }
+
+}
+
+.content {
+    padding: 24rpx 32rpx 0 32rpx;
+    font-family: PingFang SC, PingFang SC;
+    border-radius: 20rpx 20rpx 0 0;
+
+    .addressBox {
+        margin-top: 30rpx;
+        padding: 24rpx 32rpx;
+        display: flex;
+        align-items: flex-start;
+        height: 176rpx;
+        background: #FFFFFF;
+        border-radius: 20rpx 20rpx 20rpx 20rpx;
+
+        .name {
+            font-weight: 500;
+            font-size: 32rpx;
+            color: #333333;
+            line-height: 40rpx;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+
+        }
+
+        .address {
+            margin-top: 8rpx;
+            font-weight: 500;
+            font-size: 28rpx;
+            color: #666666;
+            line-height: 40rpx;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+        }
+
+    }
+
+    .productPrice {
+        background-color: #fff;
+        margin-top: 24rpx;
+        padding: 24rpx;
+        border-radius: 20rpx 20rpx 20rpx 20rpx;
+
+        .productName {
+            font-weight: bold;
+            font-size: 28rpx;
+            color: #333333;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+        }
+
+        .price {
+            font-weight: bold;
+            font-size: 26rpx;
+            color: #333333;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+        }
+
+        .spec {
+            font-weight: 500;
+            font-size: 26rpx;
+            color: #999999;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+
+        }
+
+        .shippingFee {
+            margin-top: 22rpx;
+            display: flex;
+            justify-content: space-between;
+
+            .text {
+                font-weight: 500;
+                font-size: 26rpx;
+                color: #666666;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+
+            }
+
+            .price {
+                font-weight: 500;
+                font-size: 28rpx;
+                color: #03C1B8;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+            }
+        }
+
+        .productPrice1 {
+            margin-top: 16rpx;
+            display: flex;
+            justify-content: space-between;
+
+            .text {
+                font-weight: 500;
+                font-size: 26rpx;
+                color: #666666;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+
+            }
+
+            .price {
+                font-weight: 500;
+                font-size: 28rpx;
+                color: #333333;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+            }
+        }
+
+        .total {
+            text-align: right;
+
+            .text {
+                font-weight: 400;
+                font-size: 28rpx;
+                color: #2F3437;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+
+            }
+
+            .price {
+                font-weight: 800;
+                font-size: 28rpx;
+                color: #03C1B8;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+            }
+
+        }
+    }
+
+    .weiChect {
+        height: 94rpx;
+        background: #FFFFFF;
+        border-radius: 20rpx 20rpx 20rpx 20rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-weight: 500;
+        font-size: 28rpx;
+        color: #333333;
+        line-height: 40rpx;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+        margin: 24rpx 0;
+        padding: 0 24rpx;
+
+    }
+
+    .orderInfo {
+        height: 268rpx;
+        background: #FFFFFF;
+        border-radius: 16rpx 16rpx 16rpx 16rpx;
+        padding: 26rpx 24rpx 2rpx 24rpx;
+        margin-bottom: 30rpx;
+
+        .item {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 24rpx;
+        }
+
+        .text {
+            font-weight: 400;
+            font-size: 26rpx;
+            color: #666666;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+
+        }
+
+        .text1 {
+            font-weight: 500;
+            font-size: 28rpx;
+            color: #2F3437;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+
+        }
+
+    }
+
+
+}
+
+.popup-con {
+    font-size: 27rpx;
+    color: #666666;
+    background: #F5F8F8;
+    padding: 15rpx 40rpx 40rpx 40rpx;
+
+    .popup-text {
+        font-weight: bold;
+        font-size: 40rpx;
+        color: #333333;
+        text-align: center;
+        font-style: normal;
+        text-transform: none;
+        display: flex;
+        justify-content: space-between;
+        position: relative;
+
+        text:last-of-type {
+            font-weight: 400;
+            font-size: 28rpx;
+            color: #999999;
+            text-align: center;
+            font-style: normal;
+            text-transform: none;
+            // width: 38rpx;
+            // height: 38rpx;
+            // text-align: center;
+            // line-height: 38rpx;
+            // color: #6D728B;
+            // background: #DEDEDE;
+            // border-radius: 50%;
+            // position: absolute;
+            // right: 24rpx;
+            // font-size: 28rpx;
+        }
+    }
+
+    .refund-items {
+        margin-top: 32rpx;
+        font-size: 26rpx;
+        color: #333333;
+        padding-bottom: 70rpx;
+        background: #FFFFFF;
+        border-radius: 20rpx 20rpx 20rpx 20rpx;
+
+        height: 400rpx;
+        background: #FFFFFF;
+        border-radius: 20rpx 20rpx 20rpx 20rpx;
+
+        .reason {
+            background: #E8FFFD;
+            border-radius: 20rpx 20rpx 0rpx 0rpx;
+            font-weight: bold;
+            font-size: 28rpx;
+            color: #333333;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+            padding: 16rpx 20rpx;
+        }
+
+        .radioBox {
+            display: flex;
+            width: 100%;
+            margin-top: 24rpx;
+        }
+
+
+    }
+
+    .popupButtonClass {
+        margin-top: 32rpx;
+        height: 84rpx;
+        border-radius: 98rpx 98rpx 98rpx 98rpx;
+
+        button {
+            align-items: center;
+            border-radius: 98rpx 98rpx 98rpx 98rpx;
+            font-size: 26rpx;
+        }
+    }
+}
+</style>