From 15ab5d748ea40d8da608971441857eb23cfc88ae Mon Sep 17 00:00:00 2001
From: DanyangZhao <1909085973@qq.com>
Date: Wed, 28 Jun 2023 18:01:47 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E4=BA=86=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages.json                                |  26 ++-
 src/pages/blind/bindReceived.vue              | 164 ++++++++++++++
 .../blind/lib/components/BlindNavbar.vue      |  57 +++++
 src/pages/blind/lib/components/BlindPopup.vue | 167 ++++++++++++++
 src/pages/blind/logisticsMsg.vue              | 210 ++++++++++++++++++
 src/pages/blind/myBill.vue                    | 152 +++++++++++++
 6 files changed, 775 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/blind/bindReceived.vue
 create mode 100644 src/pages/blind/lib/components/BlindNavbar.vue
 create mode 100644 src/pages/blind/lib/components/BlindPopup.vue
 create mode 100644 src/pages/blind/logisticsMsg.vue
 create mode 100644 src/pages/blind/myBill.vue

diff --git a/src/pages.json b/src/pages.json
index d55a0dc..996c78e 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -205,7 +205,31 @@
       "style": {
         "navigationBarTitleText": "仓库"
       }
-    }
+    },
+		{
+			"path": "pages/blind/home",
+			"style": {
+				"navigationBarTitleText": "盲盒首页"
+			}
+		},
+		{
+			"path": "pages/mine/blind/bindReceived",
+			"style": {
+				"navigationBarTitleText": "待收货"
+			}
+		},
+		{
+			"path": "pages/mine/blind/logisticsMsg",
+			"style": {
+				"navigationBarTitleText": "物流信息"
+			}
+		},
+		{
+			"path": "pages/mine/blind/myBill",
+			"style": {
+				"navigationBarTitleText": "消费账单"
+			}
+		}
     // ,{
     //   "path": "pages/blind/test",
     //   "style": {
diff --git a/src/pages/blind/bindReceived.vue b/src/pages/blind/bindReceived.vue
new file mode 100644
index 0000000..76e8350
--- /dev/null
+++ b/src/pages/blind/bindReceived.vue
@@ -0,0 +1,164 @@
+<template>
+  <tn-navbar>待收货</tn-navbar>
+ <view class="body">
+   <!-- 导航栏 -->
+  <!-- 待收货列表 -->
+  <view class="shop-list" v-for="item in shopList" :key="item.id">
+    <view class="top">
+      <view class="orders-number">订单编号: {{item.ordersNum}}</view>
+      <view class="status">{{item.status?"已收货":"待收货"}}</view>
+    </view>
+    <view class="content">
+      <!-- 左侧图片区域 -->
+      <view class="left-img">
+        <image
+          :src="item.image"
+          mode="scaleToFill"
+        />
+      </view>
+      <view class="shop-msg">
+        <view class="text">
+          {{item.text}}
+        </view>
+        <view class="msg-center">
+          <view class="data">提货时间: {{item.data}}</view>
+          <view class="count">X{{item.count}}</view>
+        </view>
+        <view class="msg-buttom">
+          <text>￥</text>
+          <text class="price">{{(item.price).toFixed(2)}}</text>
+        </view>
+      </view>
+    </view>
+    <view class="buttom">
+        <button class="view">查看物流</button>
+        <button class="confirm">确定收货</button>
+      </view>
+  </view>
+ </view>
+</template>
+
+<script lang="ts" setup>
+import { onLoad, onReady, onShow, onHide, onUnload } from "@dcloudio/uni-app"
+import Vue, { ref } from "vue"
+import TnNavbar from "@/tuniao-ui/components/tn-navbar/src/Navbar.vue"
+const shopList = ref([{
+  id:1,
+  ordersNum:"20238678728772161",
+  image:"/src/static/images/demo/goods/hot-zone.png",
+  status:false,
+  text:"POPMART泡泡玛特 明日早高峰系列手办盲盒礼物",
+  data:"2023-02-23",
+  count:1,
+  price:99
+}])
+// // 页面周期函数--监听页面加载
+// onLoad() {},
+// // 页面周期函数--监听页面初次渲染完成
+// onReady() {},
+// // 页面周期函数--监听页面显示(not-nvue)
+// onShow() {},
+// // 页面周期函数--监听页面隐藏
+// onHide() {},
+// // 页面周期函数--监听页面卸载
+// onUnload() {},
+// 页面处理函数--监听用户下拉动作
+// onPullDownRefresh() { uni.stopPullDownRefresh(); },
+// 页面处理函数--监听用户上拉触底
+// onReachBottom() {},
+// 页面处理函数--监听页面滚动(not-nvue)
+// onPageScroll(event) {},
+// 页面处理函数--用户点击右上角分享
+// onShareAppMessage(options) {},
+</script>
+
+<style scoped lang="scss">
+button::after{
+  border: none;
+}
+.body{
+  padding: 30rpx;
+}
+.shop-list {
+  background-color: #fff;
+  border-radius: 30rpx;
+  padding: 30rpx;
+  .top{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 30rpx;
+    height: 80rpx;
+    border-bottom: 2rpx solid #f5f5f5;
+    color: #959595;
+    line-height: 50rpx;
+    font-size: 28rpx;
+    .status{
+      color: #f00;
+      font-weight: 500;
+      font-size:34rpx;
+    }
+  }
+  .content{
+    display: flex;
+    .left-img{
+      width: 200rpx;
+      height: 200rpx;
+      image{
+        width: 200rpx;
+        height: 200rpx;
+      }
+    }
+    .shop-msg{
+      margin-left: 20rpx;
+      .text{
+        font-size: 29rpx;
+      }
+      .msg-center{
+        margin: 15rpx 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 24rpx;
+        color: #999999;
+      }
+      .msg-buttom{
+        margin-top: 34rpx;
+        font-size: 26rpx;
+        font-weight: 600;
+        .price{
+          font-size: 38rpx;
+        }
+      }
+    }
+  }
+  .buttom{
+    display: flex;
+    margin-top: 20rpx;
+    position: relative;
+    height: 100rpx;
+    .view, .confirm{
+      position: absolute;
+      width: 180rpx;
+      height: 60rpx;
+      line-height: 60rpx;
+      display: block;
+      font-size: 26rpx;
+      border-radius: 100rpx;
+      border: 1rpx solid transparent;
+      outline: none;
+      top: 25rpx;
+    }
+    .view{
+      right: 220rpx;
+      background-color: #fff;
+      color: #939393;
+      border: 2rpx solid #e1e1e1;
+    }
+    .confirm{
+      right: 0;
+      background-color: #ff5000;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/pages/blind/lib/components/BlindNavbar.vue b/src/pages/blind/lib/components/BlindNavbar.vue
new file mode 100644
index 0000000..c027d56
--- /dev/null
+++ b/src/pages/blind/lib/components/BlindNavbar.vue
@@ -0,0 +1,57 @@
+<template>
+  <view class="text" :class="{ bLine: props.isBLine }">
+    <view class="left-text">
+      <text class="top">{{ props.title }}</text>
+      <text class="bottom">{{ props. englishTitle }}</text>
+    </view>
+    <view class="right-text">查看更多
+      <image
+        src="/src/static/images/blind-box/right.png"
+        mode="scaleToFill"
+      />
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import Vue from "vue"
+const props = defineProps<{
+  title: string //中文标题
+  englishTitle: string //英文标题
+  isBLine: boolean //控制下划线是否显示
+}>()
+</script>
+
+<style scoped lang="scss">
+.bLine {
+  border-bottom: 2rpx solid #65c077;
+}
+.text {
+  display: flex;
+  justify-content: space-between;
+  height: 90rpx;
+
+  margin-bottom: 60rpx;
+  .left-text {
+    display: flex;
+    flex-direction: column;
+    .top {
+      font-size: 36rpx;
+      font-weight: 600;
+    }
+    .bottom {
+      font-size: 24rpx;
+    }
+  }
+  .right-text {
+    line-height: 80rpx;
+    display: flex;
+    image{
+      margin-left: 5rpx;
+      margin-top: 20rpx;
+      width: 40rpx;
+      height: 40rpx;
+    }
+  }
+}
+</style>
diff --git a/src/pages/blind/lib/components/BlindPopup.vue b/src/pages/blind/lib/components/BlindPopup.vue
new file mode 100644
index 0000000..447ec19
--- /dev/null
+++ b/src/pages/blind/lib/components/BlindPopup.vue
@@ -0,0 +1,167 @@
+<template>
+  <view class="blind-popup" v-if="props.resultPopup">
+    <view class="title">{{data.title}}</view>
+    <!-- 循环content -->
+    <view class="content" v-for="item in data.shopList">
+      <view class="shop-list">
+        <view class="left-img">
+          <image
+            :src="item.img"
+            mode="scaleToFill"
+          />
+        </view>
+        <view class="right-text">{{item.text}}</view>
+      <view class="count">X{{item.count}}</view>
+      </view>
+    </view>
+    <!-- content结束 -->
+    <view class="gift-belt">
+      <image
+        src="/src/static/images/blind-box/gift-belt.png"
+        mode="scaleToFill"
+      />
+    </view>
+    <view class="bottom">
+      <view class="button">
+        <button class="left" @click="goToHouse">查看仓库</button>
+        <button @click="closePopup" class="right">再来一发</button>
+      </view>
+      <view class="text">请去我的仓库去发货吧</view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import Vue from "vue";
+const emit = defineEmits(["changeShow"])
+
+const props = defineProps<{
+  resultPopup:boolean,
+  data:{
+    title:string,
+    shopList:{
+      id:number,
+      img:string,
+      text:string,
+      count:number,
+    }[]
+  }
+}>()
+const {data} = props
+
+const closePopup = () => {
+  emit("changeShow",false)
+}
+const goToHouse = () => {
+  uni.navigateTo({
+    url:"/pages/blind/wareHouse"
+  })
+}
+</script>
+
+<style scoped lang="scss">
+  .blind-popup{
+      position: relative;
+      border-radius: 16rpx;
+      background-color: #f04041;
+      width: 90%;
+      margin: 50rpx auto;
+      padding: 16rpx;
+      padding-bottom: 110rpx;
+      .title{
+        height: 75rpx;
+        line-height: 150rpx;
+        color: #fef7f7;
+        text-align: center;
+        margin-bottom: 50rpx; 
+        font-size: 32rpx;     
+      }
+      .content{
+        position :relative;
+        background-color: #e4242c;
+        padding: 20rpx;
+        border-radius: 16rpx;
+        margin-bottom: 20rpx;
+        
+        .shop-list{
+          background-color: #fff;
+          height: 220rpx;
+          border-radius: 16rpx;
+          padding: 20rpx;
+          display: flex;
+          padding-top: 30rpx;
+          .left-img{
+          image{
+            margin: 10rpx;
+            width: 150rpx;
+            height: 150rpx;
+          }
+        }
+        .right-text{
+          margin: 20rpx 0 0 30rpx;
+        }
+        }
+        .diamond{
+          position: absolute;
+          top: 24rpx;
+          left: 30rpx;
+          image{
+            width: 60rpx;
+            height: 60rpx;
+          }
+        }
+        .count{
+          position: absolute;
+          top: 40rpx;
+          right: 30rpx;
+          width: 80rpx;
+          text-align: right;
+          color: #fff;
+          background: linear-gradient(60deg,transparent 20rpx, #e4242c);
+        }
+      }
+      .gift-belt{
+        image{
+          position: absolute;
+          top: -100rpx;
+          left: 50%;
+          margin-left: -15%;
+          width: 250rpx;
+          height: 200rpx;
+        }
+      }
+      .bottom{
+        position: absolute;
+        bottom: -16rpx;
+        left: 0;
+        background: url("/src/static/images/blind-box/buttom.png") center;
+        background-size: cover;
+        width: 100%;
+        height: 280rpx;
+        padding-top: 68rpx;
+        .button{
+          display: flex;
+          .right,.left{
+            border-radius: 50rpx;
+            height: 80rpx;
+            width: 250rpx;
+            line-height: 80rpx;
+          }
+          .left{
+            color: #fadfaf;
+            background-color:#f64c4b;
+            border: 1px solid;
+          }
+          .right{
+            background-color: #fff2cb;
+            color: #e4242c;
+          }
+        }
+        .text{
+          margin-top: 30rpx;
+          text-align: center;
+          color: #fadfaf;
+        }
+      }
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/blind/logisticsMsg.vue b/src/pages/blind/logisticsMsg.vue
new file mode 100644
index 0000000..19045c6
--- /dev/null
+++ b/src/pages/blind/logisticsMsg.vue
@@ -0,0 +1,210 @@
+<template>
+  <tn-navbar>查看物流</tn-navbar>
+  <view class="body">
+    <view class="content" v-for="item in logisticsMsg" :key="item.id">
+      <!-- 上方的文字区域 -->
+    <view class="top">
+      <view class="left-box">
+        <view class="img">
+          📦
+        </view>
+        <view class="right">
+          <view class="express-name">{{item.expressName}}</view>
+          <view class="express-number">快递单号{{item.expressNumber}}</view>
+        </view>
+      </view>
+      <view class="text">复制</view>
+    </view>
+    <!-- 下方物流信息 -->
+    <view class="logisticsMsg" v-for="val in item.message">
+      <view class="msgBox" :class="{gray:val.isGray}">
+        <!-- 物流信息 -->
+        <view class="text">
+          <view class="status" v-if="val.isstatus">{{val.statusText}}
+            <text> {{val.time}}</text>
+            </view>
+          <view class="msg">{{val.text}}</view>
+        </view>
+        <!-- 左上角状态的显示 -->
+        <!-- 收字图标的显示 -->
+        <view class="harvest" v-if="val.status==='0'">收</view>
+         <!-- 橘红色的中心原点 -->
+        <view class="selected-dots" v-else-if="val.status==='1'">
+          <view class="orange"></view>
+        </view>
+        <!-- 一个点 -->
+        <view class="gray-dots" v-else></view>       
+      </view>
+    </view>
+  </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import Vue from "vue"
+import {ref} from "vue"
+import TnNavbar from "@/tuniao-ui/components/tn-navbar/src/Navbar.vue"
+const logisticsMsg = ref(
+  [
+    {
+      id:1,
+      expressName:"圆通快递",
+      expressNumber:"YT878972668971",
+      message:[
+        {
+          status:"0", //代表本人已签收
+          statusText:"已签收",
+          isstatus:false,//控制是否签收字体的显示
+          text:"[收货地址]湖南省长沙市岳麓区桐梓西路保利麓谷林语E区19栋2单元604",
+          time:""
+        },
+        {
+          status:"1", //代表已签收
+          statusText:"签收",
+          isstatus:true,//控制是否签收字体的显示
+          text:"客户签收人: 【小栈】 保利麓谷林语E区韵达快递超市已签收感谢使用圆通快递,期待再次为您服务如有疑问请联系: 15364355029, 投诉电话:13397618806，疫情期间圆通每天对网点多次消毒,快递小哥每天测量体温,佩戴口罩",
+          time:"09-17 20:37"
+        },
+        {
+          status:"2", //运输中
+          statusText:"在途",
+          isGray:true, //控制灰色样式开关
+          isstatus:true,//控制签收状态的显示
+          text:"圆通合作点 【小栈】快递已到达保利麓谷林语E区枫叶林(10栋108号)联系电话[15364355029]",
+          time:"09-17 10:25"
+        },
+        {
+          status:"3", //运输中
+          statusText:"在途",
+          isstatus:true,//控制是否签收字体的显示
+          isGray:true, //控制灰色样式开关
+          text:"[湖南省长沙市岳麓区麓谷高新分部公司] 已收入",
+          time:"09-17 07:51"
+        },
+        {
+          status:"4", //派件中
+          statusText:"派件",
+          isstatus:true,
+          isGray:true, //控制灰色样式开关
+          text:"[湖南省长沙市岳麓区麓谷高新分部公司] 派件中 派件人:陈吉宝 电话15364355029中通快递小哥每天已测体温,请放心收寄快递如有疑问,请联系:13397618806",
+          time:"09-17 07:09"
+        },
+        {
+          status:"5", //运输中
+          statusText:"在途",
+          isGray:true, //控制灰色样式开关
+          isstatus:true,//控制是否签收字体的显示
+          text:"[湖南省长沙市岳麓区麓谷高新分部公司] 已收入",
+          time:"09-16 23:45"
+        }
+      ]
+    }
+  ]
+)
+</script>
+
+<style scoped lang="scss">
+.body{
+  padding: 20rpx 20rpx;
+}
+.content {
+  //是物流信息的盒子
+  background-color: #fff;
+  padding: 20rpx;
+  border-radius: 16rpx;
+  .top{
+    display: flex;
+    align-items: center;
+    margin-bottom:60rpx;
+    .left-box{
+      display: flex;
+      .img{
+        font-size: 38rpx;
+        width: 100rpx;
+        height: 100rpx;
+        background-color: #f6f5f5;
+        text-align: center;
+        line-height: 100rpx;
+        border-radius: 100rpx;
+        margin-right: 15rpx;
+      }
+      .right{
+        font-size: 28rpx;
+        line-height: 45rpx;
+      }
+    }
+    .text{
+      color: #ff8a57;
+      flex: 1;
+      text-align: right;
+    }
+  }
+  .logisticsMsg{
+    margin:0 35rpx;
+  
+    .msgBox{
+      border-left: 2rpx solid #eeeeee;
+      padding: 0 0 30rpx 50rpx;
+      position: relative;
+      .status{
+        font-size: 34rpx;
+        font-weight: 600;
+        text{
+          font-size: 28rpx;
+        }
+      }
+      .text{
+        margin-top: -10rpx;
+      }
+      .msg{
+        margin-top: 10rpx;
+        font-size: 26rpx;
+      }
+      .gray-dots{
+        position: absolute;
+        top: 20rpx;
+        left: -8rpx;
+        width: 15rpx;
+        height: 15rpx;
+        background-color: gray;
+        border-radius: 50%;
+      }
+      // 橘红色点的样式
+      .selected-dots{
+        position: absolute;
+        top: 10rpx;
+        left: -20rpx;
+        width: 40rpx;
+        height: 40rpx;
+        border-radius: 50%;
+        border: 2rpx solid #ff5000;
+        .orange{
+          width: 20rpx;
+          height: 20rpx;
+          border-radius: 50%;
+          background-color: #ff5000;
+          margin: auto;
+          margin-top: 8rpx;
+        }
+      }
+      // 收图标的样式
+      .harvest{
+        position: absolute;
+        top: 0;
+        left: -26rpx;
+        width: 50rpx;
+        height: 50rpx;
+        background-color: #c6c6c6;
+        border-radius: 50%;
+        text-align: center;
+        line-height: 50rpx;
+        color: #eeeeee;
+        font-size: 28rpx;
+      }
+    }
+  }
+}
+.gray{
+  color: #c6c6c6;
+}
+</style>
diff --git a/src/pages/blind/myBill.vue b/src/pages/blind/myBill.vue
new file mode 100644
index 0000000..d068f5c
--- /dev/null
+++ b/src/pages/blind/myBill.vue
@@ -0,0 +1,152 @@
+<template>
+  <!-- 导航区域 -->
+  <tn-navbar z-index="1" index-url="/pages/index" fixed :bottom-shadow="false">消费账单</tn-navbar>
+<!-- 时间筛选 -->
+<view class="date-box" v-for="item in MonthsList" :key="item.id">
+  <!-- 内容上方的时间选择 -->
+  <view class="date-check">{{changeTime?changeTime:item.data}} <tn-icon icon="down" @click="checkTime(item)"></tn-icon></view>
+  <view class="shopMsg" v-for="val in item.list">
+    <!-- 左边的图片 -->
+    <view class="left"><image
+      :src="val.image"
+      mode="scaleToFill"
+    /></view>
+    <!-- 右边的信息 -->
+    <view class="text">
+      <view class="top-text">{{val.text}}</view>
+      <view class="date">{{val.purchaseData}}</view>
+    </view>
+    <!-- 价格 -->
+    <view class="price">-{{(val.price).toFixed(2)}}</view>
+
+    <!-- 时间选择器 -->
+    <tn-picker v-model="isShow" mode="time" :timeOption="params" cancelText="取消" cancelColor="#000000"
+    confirmText="确认"
+    confirmColor="#ff5000"
+    @confirm="sure"
+    ></tn-picker>
+  </view>
+</view>
+</template>
+
+<script lang="ts" setup>
+// import "@tuniao/tn-icon/dist/index.css"
+import Vue, { ref } from "vue";
+import TnNavbar from "@/tuniao-ui/components/tn-navbar/src/Navbar.vue";
+import TnIcon from "@/tuniao-ui/components/tn-icon/src/Icon.vue";
+import TnPicker  from "@/tuniao-ui/components/tn-picker/src/Picker.vue";
+const changeTime = ref<string>("")
+  const MonthsList =ref([
+    {
+      id:1,
+      isFalse:false,//用来分来每个时间选择器的标识
+      data:"2023年5月",
+      list:[{
+        key:1,
+        image:"/src/static/images/blind-box/hot-zone.png",
+        text:"POPMART泡泡玛特 明日早 高峰系列手办盲盒礼物",
+        purchaseData:"今天 12:44",
+        price:99
+      }]
+    },
+    {
+      id:2,
+      isFalse:false,
+      data:"2023年6月",
+      list:[{
+        key:1,
+        image:"/src/static/images/blind-box/hot-zone.png",
+        text:"POPMART泡泡玛特 明日早 高峰系列手办盲盒礼物",
+        purchaseData:"今天 12:44",
+        price:99
+      }]
+    }
+  ])
+  const isShow = ref(false)
+  const checkTime = (item:any)=>{
+    isShow.value = true
+    item.isFalse=true
+  }
+  const params = ref({
+          year: true,
+					month: true,
+					day: false,
+					hour: false,
+					minute: false,
+					second: false
+  })
+  const sure = (e:string)=>{
+    MonthsList.value.forEach((item,index)=>{
+    const time = e.year+"年"+e.month+"月"
+    if(item.isFalse){
+      item.data=time
+      item.isFalse = false
+    }
+    
+  })
+}
+</script>
+
+<style scoped lang="scss">
+  .date-box{
+    .date-check{
+      height: 80rpx;
+      line-height: 80rpx;
+      font-size: 32rpx;
+      padding-left: 20rpx;
+    }
+    .shopMsg{
+      display: flex;
+      background-color: #fff;
+      align-items: center;
+      padding: 20rpx;
+      .left{
+        width: 100rpx;
+        height: 100rpx;
+        margin-right: 20rpx;
+        image{
+          width: 100rpx;
+          height: 100rpx;
+          border-radius: 10rpx;
+        }
+      }
+      .text{
+        .top-text{
+          overflow: hidden;/*超出部分隐藏*/
+          text-overflow:ellipsis;/* 超出部分显示省略号 */
+          white-space: nowrap;/*规定段落中的文本不进行换行 */
+          width: 450rpx;
+          font-size: 32rpx;
+          margin-top: -12rpx;
+        }
+        .date{
+          margin-top: 30rpx;
+          font-size: 24rpx;
+          color: #a7a7a7;
+        }
+      }
+      .price{
+        flex: 1;
+        text-align: center;
+        margin-top: -66rpx;
+        font-size: 32rpx;
+        font-weight: 600;
+      }
+    }
+  }
+    //深度选择器
+    :deep(.tn-popup__content){
+      border-radius: 32rpx 32rpx 0 0;
+    }
+    .top-box{
+      display: flex;
+      padding:26rpx;
+      justify-content: space-between;
+      border-bottom: 2rpx solid #eeeeee;
+      font-size: 28rpx;
+      .sure{
+        color: #ff5000;
+      }
+    }
+
+</style>
\ No newline at end of file
-- 
Gitee