LindaBlog
<template>
    <view class="container prohibition">
        <view class="demo" :style="\'height:\' +  demo.height + \'px;\' + \'padding-top:\' + demo.top + \'px;padding-bottom:10rpx\'">
            <view class="left" :style="\'top:\' + demo.top + \'px\'">
                <view class="iconfont icon-zuo" @tap=\'backleft\'></view>
            </view>
            <view class="clr_fff">订单</view>
        </view>

        <view class="pd_t123">
            <view class="box_fixed" :style="{ top: top_val + \'rpx\'}">
                <!-- 切换 -->
                <view class="content_change">
                    <view class="operate_box">
                        <button class="operate_btn" v-for="(item,index) in btn_Arr" :key="index" :class="{\'active\':add_class==index}"
                         @tap="changeFn(index)">{{item.title}}</button>
                    </view>
                </view>
                <!-- 顶部导航栏 -->
                <view class="horizonal-tab">
                    <scroll-view scroll-x="true" scroll-with-animation class="scroll-tab">
                        <block v-for="(item,index) in tabBars" :key="index">
                            <view class="scroll-tab-item" :class="{\'active\': tabIndex==index}" @tap="toggleTab(index)">
                                {{item.name}}
                                <view class="scroll-tab-line"></view>
                            </view>
                        </block>
                    </scroll-view>
                </view>
            </view>

            <!-- 内容区 -->
            <view class="">
                <!-- 滑块视图 -->
                <view class="content" :style="{ \'padding-top\': margin_top + \'rpx\'}">
                    <view class="items">
                        <view class="order_img">
                            <image src="https://test134.vrapp.chot.cn/mini/picture/list_none.png" mode="widthFix" v-show="isEmpty == true"></image>
                        </view>
                        <view class="item" v-for="(items,index1) in queryList" :key="index1">
                            <view class="orderid">
                                <text class="title">订单号:{{items.order_no}}</text>

                                <image class="sucessImg" src="https://test134.vrapp.chot.cn/mini/picture/135_57.png" mode="widthFix"></image>
                                <text class="statusText">{{items.status}}</text>

                            </view>

                            <view class="infor uni-flex">
                                <view>
                                    <image class="orderPrdImg" mode="widthFix" @error="errImg" :src="items.goods_logo"></image>
                                </view>
                                <view class="infordt">
                                    <view class="title">{{items.goods_title}}
                                        <text class="num">x{{ items.number_goods }}</text>
                                    </view>
                                    <view class="price">¥{{ items.price_real }}元/天</view>
                                    <view class="date">{{ items.create_at }}</view>
                                </view>
                            </view>
                            <view class="pay" v-show="items.status !== \'待付款\'">
                                实付款:¥{{items.price_real * items.number_goods}}
                            </view>
                            <view class="pay" v-show="items.status == \'待付款\'">
                                待付款:¥{{items.price_real * items.number_goods}}
                            </view>
                            <view class="btn">
                                <view class="right">
                                    <image @tap="callKehu" class="kehu" src="https://test134.vrapp.chot.cn/mini/picture/kefu.png" mode="widthFix"></image>
                                    <button @tap="order_detail(index1)" hover-class="active">查看订单</button>
                                    <button hover-class="active" v-show="items.status == \'已完成\'" @tap="buyAgin(index1)">再次购买</button>
                                    <button hover-class="active" v-show="items.status ==\'待付款\' && items.mid== mid " @tap="pay_order(index1)">立即支付</button>
                                    <button v-show="items.status == \'已完成\' && items.evaluate == null" hover-class="active" @tap="evaluateFn(index1)">立即评价</button>
                                    <button v-show="items.status == \'已完成\' && items.evaluate !== null" hover-class="active" @tap="order_detail(index1)">查看评价</button>
                                </view>
                            </view>
                            <view class="assess" v-show="evaluate == true && newIdx == index1">
                                <view class="assess_item">
                                    <view class="uni-flex pd_b20">
                                        <view class="uni-rate-title">评分:</view>
                                        <uni-rate value="3" @change="changeStarts"></uni-rate>
                                    </view>
                                    <view class="uni-textarea">
                                        <textarea class="border-textarea" placeholder-style="color:#d2d2d2" placeholder="评价内容:" v-model="text_val"></textarea>
                                    </view>
                                    <view>
                                        <view class="confirm">
                                            <button class="confirm_btn" @tap="confirmFn">提交评价</button>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <uni-load-more :status="status" :content-text="contentText" />
                </view>
            </view>


        </view>

    </view>
</template>

<script>
    import app from "../../App.vue"
    import uniLoadMore from \'../../components/uni-load-more/uni-load-more.vue\';
    export default {
        components: {
            uniLoadMore
        },
        data() {
            return {
                token: \'\',
                mid: \'\',
                tabIndex: 0,
                /* 选中标签栏的序列,默认显示第一个 */
                page: 1,
                pageSize: 10,
                status: \'loading\',
                add_class: 1,
                btn_Arr: [{
                        title: "预约订单"
                    },
                    {
                        title: "商品订单"
                    }
                ],
                isEmpty: false,
                contentText: {
                    contentdown: \'上拉加载更多\',
                    contentrefresh: \'加载中.....\',
                    contentnomore: \'没有更多数据啦\'
                },
                list_count: 0,
                tabBars: [{
                        name: \'全部\',
                        id: \'guanzhu\'
                    },
                    {
                        name: \'待付款\',
                        id: \'tuijian\'
                    },
                    {
                        name: \'已完成\',
                        id: \'tiyu\'
                    }

                ],
                demo: {
                    top: 0,
                    height: 0
                },
                data: {},
                queryList: [],
                newArrayData: [],
                statusText: \'\',
                evaluate: false, // 是否点击评价
                text_val: \'\',
                stars: 3,
                order_no: null,
                newIdx: 0,
                top_val: 0,
                margin_top: 0,
                mid: ""
            }
        },
        onLoad() {
            this.mid = uni.getStorageSync(\'mid\');
            var status = \'\';
            this.getOrderList(status);
            let mobile_phone = uni.getSystemInfoSync(); // 手机信息
            if (mobile_phone.windowWidth <= 320) { // iphone5
                this.top_val = (this.demo.height + this.demo.top) * 2 + 13;
                this.margin_top = (this.demo.height + this.demo.top) * 3;
            } else if (mobile_phone.windowHeight >= 896) { // iphone XR
                this.top_val = (this.demo.height + this.demo.top) * 2 - 8;
                this.margin_top = (this.demo.height + this.demo.top) * 3;
            } else {
                this.top_val = (this.demo.height + this.demo.top) * 2;
                this.margin_top = (this.demo.height + this.demo.top) * 3;
            }
        },
        created() {
            const demo = uni.getMenuButtonBoundingClientRect()
            this.demo.top = demo.top
            this.demo.height = demo.height
            if (app.globalData.token == undefined) {
                this.token = uni.getStorageSync(\'token\');
            } else {
                this.token = app.globalData.token;
            }
        },
        onShow() {
            this.tabIndex = 0;
            this.add_class = 1;
        },
        onReachBottom(e) {
            this.page++;
、      // 数据加载完后停止数据请求
if (this.status != \'more\') { return false; } if (this.tabIndex == 0) { var status = \'\'; this.getOrderList(status); } else if (this.tabIndex == 1) { var status = 2; this.statusText = "待付款"; this.getOrderList(status); } else if (this.tabIndex == 2) { var status = 5; // 已完成 this.statusText = "已完成"; this.getOrderList(status); } }, methods: { backleft(e) { uni.navigateBack(); }, changeFn(index) { this.add_class = index; if (this.add_class == 1) { var status = \'\'; this.getOrderList(status); } else if (this.add_class == 0) { uni.switchTab({ url:"../../pages/worker/worker" }) } }, async callKehu() { const res = await this.$myRequset({ url: "/api", data: { operate: "index.store_phone", token: this.token } }); let phone_number = res.data.data.phone; if (res.data.code == 1) { uni.makePhoneCall({ phoneNumber: phone_number }); } }, order_detail(index) { uni.setStorageSync(\'order_no\', this.queryList[index]); uni.navigateTo({ url: \'../../pages/orderDetail/orderDetail\' }) }, evaluateFn(index) { this.newIdx = index; this.evaluate = !this.evaluate; this.order_no = this.queryList[index].order_no; }, changeStarts(num) { this.stars = num.value; }, errImg() { this.queryList.forEach((val) => { if (val.goods_logo.length == 29) { // 图片不完整路径 val.goods_logo = \'https://test134.vrapp.chot.cn/mini/picture/orderImg.png\'; } if (val.number_goods == null || val.goods_title == null || val.price_real == null) { val.number_goods = 1; val.price_real = 0; val.goods_title = \'居家生活料理套餐\' } }); }, navsHandleClick(i) { this.current = i; }, intervalChange(e) { this.current = e.detail.current; }, //切换选项卡 toggleTab(index) { this.tabIndex = index; this.page = 1; // tab切换时page是1哦 this.isEmpty = false; this.status = \'loading\'; switch (this.tabIndex) { case 1: var status = 2 // 待付款 this.statusText = "待付款"; this.queryList = []; // tab选项卡切换时需要将原来已经获取的数据清空,否则就还会显示原来的数据 let len = this.getOrderList(status); break; case 2: var status = 5 // 已完成 this.statusText = "已完成"; this.queryList = []; this.getOrderList(status); break; default: var status = \'\' // 默认显示全部列表 this.queryList = []; this.getOrderList(status); break; } }, //滑动切换swiper tabChange(e) { this.tabIndex = e.detail.current; }, // 再次购买 buyAgin(index) { let goods_id = this.queryList[index].goods_id; uni.navigateTo({ url: "../../pages/detail/detail?id=" + goods_id }) }, //获取订单信息 async getOrderList(status) { let data = { operate: \'Order.index\', token: this.token, page: this.page, status: status } const res = await this.$myRequset({ url: \'/api\', method: "POST", data: data }) for (var i = 0; i < res.data.data.list.list.length; i++) { this.queryList.push(res.data.data.list.list[i]); // 加载的数据追加在上一页后面(每次都循环列表长度追加即可,使用concat会new新数组,用户体验不好) } this.queryList.forEach((item, index) => { if (item.status == 0) { item.status = "已取消"; } else if (item.status == 1) { item.status = "待付款"; } else if (item.status == 2) { item.status = "待付款"; } else if (item.status == 3) { item.status = "待发货"; } else if (item.status == 4) { item.status = "待收货"; } else if (item.status == 5) { item.status = "已完成"; } }); this.list_count = res.data.data.list.count; if (this.list_count !== 0) { this.status = "more"; this.isEmpty = false; this.contentText.contentnomore = "没有更多数据啦" } else { this.status = "nomore"; this.isEmpty = true; this.contentText.contentnomore = "您暂时没有相关订单哦" } let pages = Math.ceil(this.list_count / this.pageSize); if (this.page == pages) {// 说明分页数据已加载完毕 this.status = "nomore"; } uni.clearStorageSync(); }// 支付订单 async pay_order(index) { let order_no = this.queryList[index].order_no; const res = await this.$myRequset({ url: "/api", method: "POST", data: { token: this.token, operate: "member.pay.wx_jsapi", order_no: order_no }, header: { \'content-type\': \'application/form\', } }); if (res.data.code == 1) { let param = res.data.data; uni.requestPayment({ provider: \'wxpay\', timeStamp: param.timeStamp, nonceStr: param.nonceStr, package: param.package, signType: param.signType, paySign: param.paySign, success: function(res) { console.log(\'success:\' + JSON.stringify(res)); uni.showToast({ title: "支付成功", icon: "loading" }); uni.redirectTo({ url: "../order/order" }); }, fail: function(err) { console.log(\'fail:\' + JSON.stringify(err)); uni.showToast({ title: "取消支付", icon: "loading" }); } }); } } } } </script> <style> page { background-color: #fff; } </style> <style scoped lang="scss"> .box_fixed { position: fixed; width: 100%; z-index: 1; height: 116rpx; background-color: #fff; } .content { background: #fefefe; padding: 20rpx 0; .item { width: 86%; margin: 26rpx auto; background: #fff; box-shadow: 0rpx 0rpx 6rpx 6rpx #f4f4f4; border-radius: 20rpx; padding: 27rpx; } .statusText { position: absolute; top: 0rpx; right: -34rpx; display: inline-block; width: 122rpx; height: 40rpx; z-index: 0; line-height: 40rpx; color: #fff; text-align: center; } .order_img { display: flex; align-items: center; justify-content: center; image { width: 150rpx; height: 150rpx; padding: 80rpx 80rpx 20rpx; } } .orderid { position: relative; padding-bottom: 27rpx; border-bottom: 1px solid #f4f4f4; .title { font-size: 26rpx; color: #28292c; } .sucessImg { width: 135rpx; height: 57rpx; position: absolute; top: 0; right: -34rpx; } } .infor { padding-top: 25rpx; .orderPrdImg { width: 252rpx; height: 146rpx !important; } .infordt { padding-left: 27rpx; flex: 2; .title { font-size: 24rpx; color: #28292c; } .price { font-size: 28rpx; color: #fa1c39; } .date { font-size: 24rpx; color: #a8a8a8; } .num { font-size: 24rpx; color: #a8a8a8; float: right; } } } .pay { font-size: 28rpx; color: #28292c; text-align: right; margin-bottom: 27rpx; font-weight: bold; border-bottom: 1px solid #f4f4f4; } .btn { text-align: right; display: flex; .right { display: flex; margin-left: auto; button { display: inline-block; margin-right: 20rpx; background: #fff; color: #5b5a5a; font-size: 24rpx; border: 2px solid #f4f4f4; border-radius: 40rpx; align-self: center; justify-content: flex-end; flex-direction: row-reverse; } button:after { border: none; } .active { border-color: #d8d8d8; color: #000; } .kehu { display: inline-block; width: 50rpx; height: 50rpx; margin-right: 20rpx; line-height: 50rpx; align-self: center; flex-direction: row-reverse; } } } } .horizonal-tab { background: #fff; } .horizonal-tab .active { color: #23c0ba; } .scroll-tab { white-space: nowrap; /* 必要,导航栏才能横向*/ border-bottom: 1rpx solid #eee; text-align: center; left: 0; top: 150rpx; background-color: #fff; } .scroll-tab-item { display: inline-block; /* 必要,导航栏才能横向*/ width: 25%; text-align: center; padding-top: 20rpx; } .active .scroll-tab-line { background: #23c0ba; width: 90rpx; height: 5rpx; margin: 0 auto; } .demo { display: flex; align-items: center; justify-content: center; background: #23c0ba; font-size: 26rpx; width: 100%; text-align: center; position: fixed; top: 0; z-index: 999; .left { float: left; position: absolute; width: max-content; height: max-content; top: 0; bottom: 0; left: 20rpx; margin: auto; } .clr_fff { color: #fff; font-size: 35rpx; } } .pd_t123 { padding-top: 123rpx; } .kehu { width: 50rpx; height: 50rpx; margin-right: 6rpx; line-height: 50rpx; vertical-align: middle // margin-bottom: 10rpx; } uni-rate { padding-top: 20rpx; } .assess { border-top: 20rpx solid #fafafa; background: #fefefe; padding: 20rpx 0; .assess_item { padding: 20rpx; margin: 0 auto; border-radius: 20rpx; } .border-textarea { border: 1px solid #d2d2d2; border-radius: 10rpx; } .uni-rate-title { font-size: 26rpx; color: #4f4f4f; } .pd_b20 { padding-bottom: 20rpx; } .confirm { padding-top: 20rpx; text-align: right; .confirm_btn { background: linear-gradient(to right, #63c8e8, #64d3e6); border: none; color: #fff; font-size: 26rpx; width: 146rpx; height: 47rpx; line-height: 47rpx; padding: 0; display: inline-block; } } } .content_change { width: 100%; padding: 20rpx 0 0; .operate_box { width: 80%; margin: 0 auto; // padding-top: 120rpx; .operate_btn { width: 50%; height: 70rpx; line-height: 70rpx; font-size: 30rpx; display: inline-block; text-align: center; color: #23c0ba; border: 2px solid #23c0ba; &::after { border: none; } &:first-child { border-right: 0; border-radius: 10rpx 0 0 10rpx; } &:last-child { border-radius: 0 10rpx 10rpx 0; } &.active { background-color: #23c0ba; color: #fff; } } } } </style>

 

分类:

技术点:

相关文章: