商品详情--立即兑换

src/points/productDetails/index.vue

@@ -80,7 +80,7 @@
         <!-- 平台须知 -->
         <view class="niticeClass">
           <view class="title">平台说明
-            
+
             <span style="position: absolute;right: 24rpx;">
               <image style="width: 28rpx;height: 28rpx;" @click="clichFun"
                 src="@/static/points/Keyboard_arrow_rifht.png" mode=""></image>
@@ -97,7 +97,7 @@
         <u-button :customStyle="{
           color: '#fff',
           background: '#03C1B8'
-        }">立即兑换</u-button>
+        }" @click="redeemNowFun">立即兑换</u-button>
       </view>
       <!-- <view class="footer-bar">
         <u-button :customStyle="{
@@ -106,44 +106,33 @@
         }">库存不足</u-button>
       </view> -->
 
-       <u-popup :show="showPopup" mode="bottom" @close="showPopup = false" round="20">
-        <view class="popupClass">
-          <view class="niticeClass">
-            <view class="title">
-              兑换须知
-            </view>
-            <view class="text">
-              1、会员可凭上述积分兑换“广誉源会员定制玻璃杯”一个； <br>
-              2、双层曲线杯身在隔热防烫的同时，让您的手掌体验一次美妙的抓握感； <br>
-              3、积分兑换商品不支持质量问题外的退换货服务，请您先确认后签收；<br>
-              4、积分商城仅支持中国大陆地区的兑换邮寄服务，我们将在10个工作日内寄出；<br>
-            </view>
-
-            <view class="title">平台说明 </view>
-            <view class="text">
-              价格说明：划线价格：商品的专柜价、吊牌价、正品零售价、厂商指导价，并非原价，仅供参考未划线价格：商品的实时标价，不因表述的差异改变性质。具体成交价格根据商品参加活动、或会员优惠、积分等发生变化，最终以订单结算页价格为准。
-            </view>
-          </view>
-
-        </view>
+      <u-popup :show="redemptionRulesShowPopup" mode="bottom" @close="redemptionRulesShowPopup = false" round="20">
+        <RedemptionRules ref="redemptionRulesRef"></RedemptionRules>
+      </u-popup>
+      <u-popup :show="selectProductShowPopup" mode="bottom" round="10">
+        <SelectProduct ref="selectProductRef" @closeSelectProduct="closeSelectProduct"></SelectProduct>
       </u-popup>
 
     </scroll-view>
 
 
 
+
   </view>
 </template>
 
 <script>
 import ImageItem from "@/components/swiper/components/image.vue";
+import RedemptionRules from "./redemptionRules.vue";
+import SelectProduct from "./selectProduct.vue";
 
 export default {
-  components: { ImageItem },
+  components: { ImageItem, RedemptionRules, SelectProduct },
   data() {
     return {
       isTop: 0,
-      showPopup: false
+      redemptionRulesShowPopup: false,
+      selectProductShowPopup: false,
 
 
     }
@@ -164,8 +153,14 @@ export default {
       this.isTop = e.detail.scrollTop > 0
     },
     clichFun() {
-      console.log('5555')
-      this.showPopup = true
+      this.redemptionRulesShowPopup = true
+    },
+    //立即兑换
+    redeemNowFun() {
+      this.selectProductShowPopup = true
+    },
+    closeSelectProduct(){
+      this.selectProductShowPopup = false
     },
 
     //导航栏返回按钮
@@ -196,8 +191,8 @@ export default {
     height: 84rpx;
     border-radius: 98rpx 98rpx 98rpx 98rpx;
     margin: 20rpx 40rpx;
-     background: '#000';
-   
+    background: '#000';
+
   }
 }
 

src/points/productDetails/redemptionRules.vue

@@ -0,0 +1,82 @@
+<template>
+    <view>
+        <view class="popupClass">
+                <view class="niticeClass">
+                    <view class="title">
+                        兑换须知
+                    </view>
+                    <view class="text">
+                        1、会员可凭上述积分兑换“广誉源会员定制玻璃杯”一个； <br>
+                        2、双层曲线杯身在隔热防烫的同时，让您的手掌体验一次美妙的抓握感； <br>
+                        3、积分兑换商品不支持质量问题外的退换货服务，请您先确认后签收；<br>
+                        4、积分商城仅支持中国大陆地区的兑换邮寄服务，我们将在10个工作日内寄出；<br>
+                    </view>
+
+                    <view class="title">平台说明 </view>
+                    <view class="text">
+                        价格说明：划线价格：商品的专柜价、吊牌价、正品零售价、厂商指导价，并非原价，仅供参考未划线价格：商品的实时标价，不因表述的差异改变性质。具体成交价格根据商品参加活动、或会员优惠、积分等发生变化，最终以订单结算页价格为准。
+                    </view>
+                </view>
+            </view>
+    </view>
+
+</template>
+
+<script>
+
+export default {
+    components: {},
+    data() {
+        return {
+            showPopup: false
+
+
+        }
+    },
+    onLoad(data) {
+
+    },
+    onShow() {
+
+    },
+    onPageScroll() {
+    },
+
+    methods: {
+
+
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.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

@@ -0,0 +1,271 @@
+<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>
+        <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"
+                src="@/static/points/Keyboard_arrow_rifht.png" mode=""></image>
+
+        </view>
+        <view class="productPrice">
+            <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>
+                    </view>
+                    <view
+                        style="margin-left: 24rpx;display: flex;flex-direction: column;justify-content: space-between;">
+                        <view class="price">实付价 ￥10元+1000积分 </view>
+                        <view class="spec">已选:大号,白色 </view>
+                    </view>
+
+                </view>
+                <view class="deletePrice">100</view>
+            </view>
+        </view>
+        <!--选择规格 -->
+        <view class="specClass">
+            <view class="title">颜色（3）</view>
+            <view style="display: flex;flex-wrap: wrap;">
+                <view class="specCombination" :class="value == 4 ? 'active' : ''" v-for="value in 4">
+                    浅纹-白色-普通
+                </view>
+            </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">
+                    普通大号 - 1000ML
+                </view>
+            </view>
+            
+        </view>
+        <!--运费 -->
+        <view class="yunFeiClass">
+            <view class="text">运费</view>
+            <view class="price">￥0</view>
+
+        </view>
+        <!--订单备注 -->
+        <view class="nodeClass">
+            <view class="text">订单备注</view>
+            <input type="text" maxlength="200" v-model="reasonRefusal" placeholder="选填，请填写您的备注信息，限200字" />
+
+
+        </view>
+        <view class="footer-bar">
+            <u-button :customStyle="{
+                color: '#fff',
+                background: '#03C1B8'
+            }" @click="redeemNowFun">实付价 ￥10元+1000积分</u-button>
+        </view>
+    </view>
+
+</template>
+
+<script>
+
+export default {
+    components: {},
+    data() {
+        return {
+            showPopup: false
+
+
+        }
+    },
+    onLoad(data) {
+
+    },
+    onShow() {
+
+    },
+    onPageScroll() {
+    },
+
+    methods: {
+        closeSelectProduct(){
+            this.$emit('closeSelectProduct')
+        }
+
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+    background-color: #F5F8F8;
+    padding: 24rpx 32rpx 0 32rpx;
+    font-family: PingFang SC, PingFang SC;
+    height: 1350rpx;
+    border-radius: 20rpx 20rpx 0 0;
+
+    .addressBox {
+        position: relative;
+        margin-top: 70rpx;
+        display: flex;
+        align-items: center;
+        border-radius: 20rpx 20rpx 20rpx 20rpx;
+
+        .name {
+            margin: 0 24rpx;
+            font-weight: 500;
+            font-size: 32rpx;
+            color: #333333;
+            line-height: 40rpx;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+        }
+
+        .address {
+            font-weight: 500;
+            font-size: 28rpx;
+            color: #333333;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+        }
+    }
+
+    .productPrice {
+        background-color: #fff;
+        margin-top: 24rpx;
+        padding: 24rpx;
+        border-radius: 20rpx 20rpx 20rpx 20rpx;
+
+        .price {
+            font-weight: bold;
+            font-size: 28rpx;
+            color: #03C1B8;
+            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;
+           
+        }
+
+        .deletePrice {
+            font-weight: 500;
+            font-size: 32rpx;
+            color: #666666;
+            text-align: left;
+            font-style: normal;
+            text-decoration-line: line-through;
+            text-transform: none;
+        }
+    }
+
+    .specClass {
+        background-color: #fff;
+        margin-top: 24rpx;
+        padding: 24rpx;
+        height: 396rpx;
+        border-radius: 20rpx 20rpx 20rpx 20rpx;
+
+        .title {
+            font-weight: bold;
+            font-size: 28rpx;
+            color: #333333;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+        }
+
+        .specCombination {
+            font-weight: 500;
+            font-size: 24rpx;
+            color: #666666;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+            height: 56rpx;
+            background: #F0F0F0;
+            border-radius: 38rpx 38rpx 38rpx 38rpx;
+            margin-right: 16rpx;
+            padding: 8rpx 16rpx;
+            margin-top: 24rpx;
+        }
+
+        .active {
+            background: #03C1B8;
+            border-radius: 38rpx 38rpx 38rpx 38rpx;
+            color: #fff;
+        }
+
+
+    }
+
+    .yunFeiClass {
+        display: flex;
+        justify-content: space-between;
+        height: 92rpx;
+        background: #FFFFFF;
+        border-radius: 20rpx 20rpx 20rpx 20rpx;
+        margin-top: 24rpx;
+        align-items: center;
+        padding: 24rpx;
+
+        .text {
+            font-weight: 500;
+            font-size: 28rpx;
+            color: #666666;
+            line-height: 40rpx;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+        }
+    }
+
+    .nodeClass {
+        margin-top: 24rpx;
+        padding: 24rpx;
+        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;
+
+        input {
+            font-weight: 500;
+            font-size: 28rpx;
+            color: #999999;
+            line-height: 40rpx;
+            text-align: right;
+            font-style: normal;
+            text-transform: none;
+            margin-left: 54rpx;
+            width: 472rpx;
+        }
+    }
+}
+
+
+
+.footer-bar {
+    .u-button {
+        width: 670rpx;
+        height: 84rpx;
+        border-radius: 98rpx 98rpx 98rpx 98rpx;
+        margin: 20rpx 40rpx;
+        background: '#000';
+
+    }
+}
+</style>