123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639 |
- <template>
- <view class="details clearfix" :style="{ paddingBottom: isIphoneX ? 130 + 68 + 'rpx' : '130rpx' }">
- <cu-custom :navbar-data="nvabarData"></cu-custom>
- <view class="container-details" :style="{ paddingTop: CustomBar + 'px' }" v-show="isRequest">
- <!-- 订单信息 -->
- <view class="information-content">
- <view class="info-item"
- ><view class="item-view"
- ><text class="label">供应商:{{ orderInfo.shopName ? orderInfo.shopName : '' }}</text></view
- ></view
- >
- <view class="info-item"
- ><view class="item-view"
- ><text class="label">订单号:{{ orderInfo.shopOrderNo }}</text></view
- ></view
- >
- <view class="info-item"
- ><view class="item-view"
- ><text class="label">下单时间:{{ orderInfo.orderTime }}</text></view
- ></view
- >
- <view class="info-item">
- <view class="item-view"
- ><text class="label"
- >收款状态:<text :style="{ color: setStatusText(orderInfo.receiptStatus) }">{{
- setStatusTextHtml(orderInfo.receiptStatus)
- }}</text></text
- ></view
- >
- <view class="item-view"
- ><text class="label"
- >结算状态:<text :style="{ color: setStatusText(orderInfo.payStatus) }">{{
- setStatusTextHtml1(orderInfo.payStatus)
- }}</text></text
- ></view
- >
- </view>
- <view class="info-item">
- <view class="item-view"
- ><text class="label"
- >发货状态:<text :style="{ color: setStatusText(orderInfo.sendOutStatus) }">{{
- setStatusTextHtml2(orderInfo.sendOutStatus)
- }}</text></text
- ></view
- >
- </view>
- </view>
- <!-- 地址信息 -->
- <view class="address-content">
- <view class="info-item"
- ><text class="label">收货人:{{ orderInfo.userInfo.receiver }}</text></view
- >
- <view class="info-item"
- ><text class="label">联系方式:{{ orderInfo.userInfo.mobile }}</text></view
- >
- <view class="info-item"
- ><text class="label"
- >收货地址:<text style="color: #666666;">{{ orderInfo.userInfo.address }}</text></text
- ></view
- >
- </view>
- <!-- 商品 -->
- <view class="goods-list">
- <view class="goods-item clearfix">
- <view class="productlist" v-for="(pros, idx) in orderInfo.orderProductList" :key="idx">
- <view class="goods-pros-t" @click="hanldOperationConfim(pros)">
- <view class="pros-left">
- <view class="pros-img"><image :src="pros.image" alt="" mode="aspectFill"/></view>
- </view>
- <view class="pros-product">
- <view class="producttitle">{{ pros.aliasName ? pros.aliasName : '' }}</view>
- <view class="productspec">规格:{{ pros.productUnit ? pros.productUnit : '' }}</view>
- <view class="productspec">商品编码:{{ pros.productNo ? pros.productNo : '' }}</view>
- <view class="product-view">
- <view class="view-num">数量:{{ pros.num + pros.presentNum }}</view>
- </view>
- <view class="product-view">
- <view class="view-num">已发货:{{ pros.shipmentsNum }}</view>
- <view class="view-num">未发货:{{ pros.notOutStore - pros.actualCancelNum }}</view>
- </view>
- <view class="product-view">
- <view class="view-num" v-if="pros.returnedNum > 0"
- >已退货:{{ pros.returnedNum }}</view
- >
- <view class="view-num" v-if="pros.actualCancelNum > 0"
- >已取消:{{ pros.actualCancelNum }}</view
- >
- </view>
- <text class="iconfont icon-genghuan"></text>
- </view>
- </view>
- </view>
- <view class="goods-pros-m" v-if="orderInfo.note != null || orderInfo.note != ''">
- <view class="m-text">留言:</view>
- <view class="m-input">
- <view class="text">{{ orderInfo.note ? orderInfo.note : '' }}</view>
- </view>
- </view>
- <view class="goods-pros-b">
- <view class="count">共{{ orderInfo.itemCount }}件商品</view>
- </view>
- </view>
- </view>
- <!-- 底部按钮 -->
- <view class="button-template" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
- <view class="button-content">
- <!-- #ifdef MP-WEIXIN -->
- <button class="btn btn-color" open-type="share" @click="onShareAppMessage">分享订单</button>
- <!-- #endif -->
- </view>
- </view>
- <!--底部选择模态层弹窗组件 -->
- <view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="hideSpec">
- <!-- 遮罩层 -->
- <view class="mask"></view>
- <view
- class="layer"
- @tap.stop="discard"
- :style="{ paddingBottom: isIphoneX ? '68rpx' : '36rpx', bottom: isIphoneX ? '-332rpx' : '-294rpx' }"
- >
- <view class="content">
- <view class="layer-title">商品显示名:</view>
- <view class="layer-name">{{ handleData.name }}</view>
- <view class="layer-text">
- <view class="layer-text-fl">
- 售价:<text style="color: #666;">¥{{ toFixedFn(handleData.discountPrice) }}</text>
- </view>
- <view class="layer-text-fr">
- <text style="color: #666;">共计{{ handleData.num + handleData.presentNum }}件商品</text>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import headerBack from '@/components/cm-module/headerNavbar/header-back' //自定义导航
- export default {
- components: {
- headerBack
- },
- data() {
- return {
- nvabarData: {
- //顶部自定义导航
- showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
- showSearch: 0,
- title: '订单详情', // 导航栏 中间的标题
- haveBack: false,
- textLeft: this.$store.state.isIphone
- },
- isIphoneX: this.$store.state.isIphoneX,
- CustomBar: this.CustomBar, // 顶部导航栏高度
- specClass: '', //规格弹窗css类,控制开关动画
- handleData: {},
- state: 0,
- userID: '',
- shopOrderId: '',
- shareCode: '', //分享码
- orderInfo: {}, //订单信息
- payStatus: 0,
- btnStatus: 0, //按钮组件状态
- isRequest: false, //是否加载完成渲染子组件
- isOrderShare: false,
- addressData: {}, //地址信息初始化
- information: {} //订单信息初始化
- }
- },
- onLoad(option) {
- console.log(option)
- this.shopOrderId = option.shopOrderId
- this.initShopOrderDetails()
- },
- methods: {
- initShopOrderDetails() {
- //初始化页面数据@参数:订单ID
- this.ShopService.GetShopOrderDetails({ shopOrderId: this.shopOrderId })
- .then(res => {
- this.orderInfo = res.data.shopOrder
- this.isRequest = true
- })
- .catch(err => {
- this.$util.msg(err.msg, 2000)
- })
- },
- handButtonConfirm(data) {
- //监听点击时间的按钮类型并执行...
- this.handShowAlert(data)
- },
- setStatusTextHtml(status) {
- let TextHtml = ''
- switch (status) {
- case 1:
- TextHtml = '待付款'
- break
- case 2:
- TextHtml = '部分付款'
- break
- case 3:
- TextHtml = '已付款'
- break
- }
- return TextHtml
- },
- setStatusTextHtml1(status) {
- let TextHtml = ''
- switch (status) {
- case 1:
- TextHtml = '待结算'
- break
- case 2:
- TextHtml = '部分结算'
- break
- case 3:
- TextHtml = '已结算'
- break
- }
- return TextHtml
- },
- setStatusTextHtml2(status) {
- let TextHtml = ''
- switch (status) {
- case 1:
- TextHtml = '待发货'
- break
- case 2:
- TextHtml = '部分发货'
- break
- case 3:
- TextHtml = '已发货'
- break
- }
- return TextHtml
- },
- setStatusText(status) {
- let textColor = ''
- switch (status) {
- case 1:
- textColor = '#FF2A2A'
- break
- case 2:
- textColor = '#FF5B00'
- break
- case 3:
- textColor = '#38CB3D'
- break
- }
- return textColor
- },
- hanldOperationConfim(data) {
- //显示选择数量确认弹窗
- this.specClass = 'show'
- this.handleData = data
- },
- toFixedFn(text) {
- return Number(text).toFixed(2)
- },
- hideSpec() {
- //关闭选择数量确认弹窗
- this.specClass = 'hide'
- setTimeout(() => {
- this.specClass = 'none'
- }, 200)
- },
- onShareAppMessage(res) {
- //分享转发
- if (res.from === 'button') {
- // 来自页面内转发按钮
- }
- return {
- title: '您有订单待处理,请点击查看~',
- path: `/pages/supplier/login/share-info?authority=2&shopOrderId=${this.shopOrderId}`,
- imageUrl: 'https://img.caimei365.com/group1/M00/03/95/Cmis216Sk_SABnOFABZCgCzFV_g063.png'
- }
- },
- discard() {
- //丢弃
- }
- },
- onPullDownRefresh() {
- //下拉刷新
- this.initShopOrderDetails()
- uni.stopPullDownRefresh()
- },
- onShow() {}
- }
- </script>
- <style lang="scss">
- page {
- height: 100%;
- background: #f7f7f7;
- }
- .details {
- padding-bottom: 130rpx;
- width: 100%;
- height: auto;
- }
- .container-details {
- background: #f7f7f7;
- }
- .information-content {
- width: 702rpx;
- height: auto;
- padding: 10rpx 24rpx;
- background: #ffffff;
- margin-bottom: 24rpx;
- .info-item {
- height: 58rpx;
- width: 100%;
- display: flex;
- .item-view {
- flex: 1;
- line-height: 58rpx;
- font-size: $font-size-28;
- color: #333333;
- }
- }
- }
- .address-content {
- width: 702rpx;
- height: auto;
- padding: 10rpx 24rpx;
- background: #ffffff;
- margin-bottom: 24rpx;
- .info-item {
- width: 100%;
- display: flex;
- line-height: 50rpx;
- font-size: $font-size-28;
- color: #333333;
- }
- }
- .goods-list {
- width: 100%;
- height: auto;
- background: #f7f7f7;
- .goods-item {
- width: 702rpx;
- padding: 24rpx;
- height: auto;
- background: #ffffff;
- margin-bottom: 24rpx;
- &:last-child {
- margin-bottom: 0;
- }
- }
- .productlist {
- width: 100%;
- height: auto;
- }
- .goods-pros-t {
- display: flex;
- width: 100%;
- height: auto;
- padding: 12rpx 0;
- .pros-left {
- width: 210rpx;
- height: 100%;
- margin: 0 26rpx 0 0;
- }
- .pros-img {
- width: 210rpx;
- height: 210rpx;
- border-radius: 10rpx;
- border: 1px solid #f3f3f3;
- image {
- width: 100%;
- height: 100%;
- border-radius: 10rpx;
- }
- }
- }
- .pros-product {
- width: 468rpx;
- height: 100%;
- line-height: 36rpx;
- font-size: $font-size-26;
- position: relative;
- .icon-genghuan {
- position: absolute;
- top: 50%;
- right: 0;
- font-size: $font-size-44;
- color: $color-system;
- }
- .product-view {
- width: 100%;
- height: auto;
- display: flex;
- .view-num {
- flex: 1;
- text-align: left;
- font-size: $font-size-26;
- color: #666666;
- line-height: 44rpx;
- }
- }
- .producttitle {
- width: 100%;
- display: inline-block;
- height: auto;
- text-overflow: ellipsis;
- display: -webkit-box;
- word-break: break-all;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- overflow: hidden;
- margin-bottom: 8rpx;
- }
- .productspec {
- height: 44rpx;
- color: #666666;
- line-height: 44rpx;
- }
- .productprice {
- height: 48rpx;
- position: absolute;
- width: 100%;
- bottom: 0;
- .price {
- line-height: 48rpx;
- font-size: $font-size-28;
- width: 48%;
- color: #ff2a2a;
- float: left;
- }
- .count {
- height: 100%;
- float: right;
- position: relative;
- .small {
- color: #666666;
- }
- }
- }
- }
- .goods-pros-m {
- width: 100%;
- height: auto;
- line-height: 76rpx;
- font-size: $font-size-26;
- color: $text-color;
- float: left;
- padding: 10rpx 0;
- border-top: 1px solid #f7f7f7;
- border-bottom: 1px solid #f7f7f7;
- .m-text {
- width: 62rpx;
- float: left;
- padding-right: 20rpx;
- font-weight: bold;
- }
- .m-input {
- display: -webkit-box;
- display: -webkit-flex;
- display: flex;
- -webkit-box-align: center;
- -webkit-align-items: center;
- align-items: center;
- position: relative;
- width: 620rpx;
- height: auto;
- padding: 20rpx 0 10rpx 0;
- background: #ffffff;
- .text {
- width: 100%;
- height: 100%;
- font-size: $font-size-26;
- line-height: 36rpx;
- color: #333333;
- }
- }
- }
- .goods-pros-b {
- width: 100%;
- height: 40rpx;
- margin-top: 12rpx;
- float: left;
- .count {
- float: right;
- font-size: $font-size-28;
- line-height: 40rpx;
- color: $text-color;
- display: flex;
- justify-content: flex-end;
- }
- }
- }
- .button-template {
- width: 100%;
- height: auto;
- position: fixed;
- bottom: 0;
- left: 0;
- background: #ffffff;
- -webkit-border-radius: 20rpx 20rpx 0 0;
- border-radius: 20rpx 20rpx 0 0;
- -webkit-box-shadow: 0px 3px 10px rgba(51, 51, 51, 0.5);
- box-shadow: 0px 3px 10px rgba(51, 51, 51, 0.5);
- .button-content {
- width: 702rpx;
- padding: 0 24rpx;
- height: auto;
- float: left;
- position: relative;
- .btn {
- width: 160rpx;
- height: 64rpx;
- margin: 22rpx;
- line-height: 64rpx;
- font-size: $font-size-26;
- color: #ffffff;
- text-align: center;
- border-radius: 10rpx;
- float: right;
- }
- .btn-color {
- background: $btn-confirm;
- margin: 22rpx 0 22rpx 22rpx;
- .tips {
- width: 160rpx;
- height: 34rpx;
- padding: 10rpx 10rpx;
- background: linear-gradient(45deg, rgba(0, 0, 0, 1) 0%, rgba(87, 87, 87, 1) 100%);
- box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
- border-radius: 8rpx;
- position: absolute;
- color: #ffffff;
- line-height: 34rpx;
- font-size: $font-size-24;
- text-align: left;
- right: 24rpx;
- top: -45rpx;
- &:before {
- content: '';
- width: 25rpx;
- height: 25rpx;
- background: linear-gradient(45deg, rgba(0, 0, 0, 1) 0%, rgba(87, 87, 87, 1) 100%);
- position: absolute;
- bottom: -8rpx;
- right: 30rpx;
- z-index: -1;
- transform: rotate(45deg);
- }
- }
- }
- }
- }
- .popup {
- position: fixed;
- top: 0;
- width: 100%;
- height: 100%;
- z-index: 999;
- display: none;
- .mask {
- position: fixed;
- top: 0;
- width: 100%;
- height: 100%;
- z-index: 21;
- background-color: rgba(0, 0, 0, 0.6);
- }
- .layer {
- position: fixed;
- z-index: 22;
- bottom: -294rpx;
- width: 702rpx;
- padding: 24rpx 24rpx 36rpx 24rpx;
- height: 236rpx;
- border-radius: 20rpx 20rpx 0 0;
- background-color: #fff;
- display: flex;
- flex-wrap: wrap;
- align-content: space-between;
- .content {
- width: 100%;
- .layer-title {
- font-size: $font-size-28;
- color: $text-color;
- line-height: 58rpx;
- }
- .layer-name {
- width: 100%;
- display: inline-block;
- height: auto;
- text-overflow: ellipsis;
- display: -webkit-box;
- word-break: break-all;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- overflow: hidden;
- margin-bottom: 8rpx;
- font-size: $font-size-28;
- color: #666;
- }
- .layer-text {
- margin-top: 10rpx;
- font-size: $font-size-28;
- color: $text-color;
- line-height: 58rpx;
- .layer-text-fl {
- float: left;
- }
- .layer-text-fr {
- float: right;
- }
- }
- }
- }
- &.show {
- display: block;
- .mask {
- animation: showPopup 0.2s linear both;
- }
- .layer {
- animation: showLayer 0.2s linear both;
- }
- }
- &.hide {
- display: block;
- .mask {
- animation: hidePopup 0.2s linear both;
- }
- .layer {
- animation: hideLayer 0.2s linear both;
- }
- }
- &.none {
- display: none;
- }
- }
- </style>
|