diancan_uni/pages/shopRole/info/index.vue

<template>
    <!-- pages/shopInfo/index.wxml -->
    <view class="container">
        <!-- 个人信息 -->
        <view class="userInfo">
            <view class="info">
                <view class="info_l">
                    <view class="thumb_wrap">
                        <image class="thumb" :src="imgUrl + info.thumb"></image>
                    </view>
                    <view class="name_wrap">
                        <view class="name">{{ info.title }}</view>
                        <view class="tel">{{ info.phone }}</view>
                    </view>
                </view>
                <view class="tag" @tap="goMyIndex">普通用户</view>
            </view>
            <!-- 小圆圈 -->
            <view class="square"></view>
        </view>
        <!-- 弧度背景 -->
        <image class="bg" src="/static/statics/img/user/bg.png"></image>
        <!-- 账户余额 -->
        <view class="item firstItem">
            <view class="item_l">
                <view class="title">账户余额</view>
                <view class="cash">
                    <view class="cash_tag">¥</view>
                    <view class="cash_num">{{ info.money }}</view>
                </view>
            </view>
        </view>
        <!-- 门店状态 -->
        <view class="item">
            <view class="item_l">
                <view class="title">门店状态</view>
            </view>
            <view class="item_r">
                <van-radio-group :value="status" direction="horizontal" @change="onChangeSell" class="radioGroup">
                    <van-radio :name="1" checked-color="#295C56" :class="status == 1 ? '' : 'unactive'">营业</van-radio>
                    <van-radio :name="0" checked-color="#295C56" :class="status == 0 ? '' : 'unactive'">未营业</van-radio>
                </van-radio-group>
            </view>
        </view>
        <!-- 营业时间 -->
        <view class="item" @tap="goBusinessTime">
            <view class="item_l">
                <view class="title">营业时间</view>
            </view>
            <view class="item_r">
                <van-icon name="arrow" />
            </view>
            <!-- <view class="item_r flex">
			<view class="time" bindtap="beginTimeFun">{{ begin_at }}</view>
			<view class="line"></view>
			<view class="time" bindtap="endTimeFun">{{ end_at }}</view>
		</view> -->
        </view>
        <!-- 是否允许自提 -->
        <view class="item">
            <view class="item_l">
                <view class="title">是否允许自提</view>
            </view>
            <view class="item_r">
                <van-radio-group :value="is_ziti" direction="horizontal" @change="onChangeZiti" class="radioGroup">
                    <van-radio :name="1" checked-color="#295C56" :class="is_ziti == 1 ? '' : 'unactive'">是</van-radio>
                    <van-radio :name="0" checked-color="#295C56" :class="is_ziti == 0 ? '' : 'unactive'">否</van-radio>
                </van-radio-group>
            </view>
        </view>
        <!-- 是否允许配送 -->
        <view class="item">
            <view class="item_l">
                <view class="title">是否允许配送</view>
            </view>
            <view class="item_r">
                <van-radio-group :value="is_delivery" direction="horizontal" @change="onChangeDelivery" class="radioGroup">
                    <van-radio :name="1" checked-color="#295C56" :class="is_delivery == 1 ? '' : 'unactive'">是</van-radio>
                    <van-radio :name="0" checked-color="#295C56" :class="is_delivery == 0 ? '' : 'unactive'">否</van-radio>
                </van-radio-group>
            </view>
        </view>
        <!-- 提现 -->
        <view class="item" @tap="goCashOut">
            <view class="item_l">
                <view class="title">提现</view>
            </view>
            <view class="item_r">
                <van-icon name="arrow" />
            </view>
        </view>
        <!-- 提现记录 -->
        <view class="item" @tap="goCashOutlog">
            <view class="item_l">
                <view class="title">提现记录</view>
            </view>
            <view class="item_r">
                <van-icon name="arrow" />
            </view>
        </view>
        <!-- 门店外卖订单 -->
        <view class="item" @tap="goShopOrder" data-status="1">
            <view class="item_l">
                <view class="title">门店外卖订单</view>
            </view>
            <view class="item_r">
                <van-icon name="arrow" />
            </view>
        </view>
        <!-- 门店自提订单 -->
        <view class="item" @tap="goShopOrder" data-status="2">
            <view class="item_l">
                <view class="title">门店自提订单</view>
            </view>
            <view class="item_r">
                <van-icon name="arrow" />
            </view>
        </view>
        <!-- 优惠券使用情况 -->
        <view class="item" @tap="goShopCoupons">
            <view class="item_l">
                <view class="title">优惠券使用统计</view>
            </view>
            <view class="item_r">
                <van-icon name="arrow" />
            </view>
        </view>
        <!-- 开店时间 -->
        <van-popup :show="showBegin" position="bottom" @close="closeBeginTimePop">
            <van-datetime-picker type="time" title="选择开店时间" :value="currentBegin" @confirm="confirmBeginTime" @cancel="closeBeginTimePop" />
        </van-popup>
        <!-- 闭店时间 -->
        <van-popup :show="showEnd" position="bottom" @close="closeEndTimePop">
            <van-datetime-picker type="time" title="选择闭店时间" :value="currentEnd" @confirm="confirmEndTime" @cancel="closeEndTimePop" />
        </van-popup>
    </view>
</template>

<script>
let myPro = require('../../../utils/wxRequest.js');

let util = require('../../../utils/util.js');

export default {
    data() {
        return {
            imgUrl: getApp().globalData.imgUrl,
            begin_at: '',
            end_at: '',
            status: 1,
            //
            is_ziti: 1,
            info: null,
            // 店铺详情
            showBegin: false,
            // 开店 时间pop
            currentBegin: '',
            showEnd: false,
            // 闭店 时间pop
            currentEnd: '',
            is_delivery: 1 // 1允许配送 0不允许
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        let that = this;
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        var that = this;
        that.getShopInfo();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    onPageScroll: function (event) {
        // Do something when page scroll
    },
    onResize: function () {
        // Do something when page resize
    },
    methods: {
        // 获取店铺信息
        getShopInfo() {
            let that = this;
            myPro
                .wxRequest('store/info', 'GET', {})
                .then((res) => {
                    that.setData({
                        info: res.result,
                        begin_at: res.result.begin_at,
                        end_at: res.result.end_at,
                        status: res.result.status,
                        is_ziti: res.result.is_ziti,
                        is_delivery: res.result.is_delivery
                    });
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 去个人资料
        goMyIndex() {
            uni.reLaunch({
                url: '/pages/user/index/index'
            });
        },

        // 是否营业
        onChangeSell(event) {
            let that = this;
            that.setData({
                status: event.detail
            });
            that.editShop();
        },

        // 是否自提
        onChangeZiti(event) {
            let that = this;
            that.setData({
                is_ziti: event.detail
            });
            that.editShop();
        },

        // 是否允许配送
        onChangeDelivery(event) {
            let that = this;
            that.setData({
                is_delivery: event.detail
            });
            that.editShop();
        },

        // 去门店订单
        goShopOrder(event) {
            let that = this;
            let status = event.currentTarget.dataset.status; // console.log('订单状态',event)

            uni.navigateTo({
                url: '/pages/shopRole/order/index?status=' + status
            });
        },

        // 开店时间
        beginTimeFun() {
            let that = this;
            that.setData({
                showBegin: true
            });
        },

        confirmBeginTime(event) {
            // console.log('开始时间',event)
            let that = this;
            that.setData({
                begin_at: event.detail,
                showBegin: false
            });
            that.editShop();
        },

        closeBeginTimePop() {
            let that = this;
            that.setData({
                showBegin: false
            });
        },

        // 闭店时间
        endTimeFun() {
            let that = this;
            that.setData({
                showEnd: true
            });
        },

        confirmEndTime(event) {
            // console.log('闭店时间',event)
            let that = this;
            that.setData({
                end_at: event.detail,
                showEnd: false
            });
            that.editShop();
        },

        closeEndTimePop() {
            let that = this;
            that.setData({
                showEnd: false
            });
        },

        // 编辑店铺信息
        editShop() {
            let that = this;
            let params = {
                status: that.status,
                is_ziti: that.is_ziti,
                begin_at: that.begin_at,
                end_at: that.end_at,
                is_delivery: that.is_delivery
            };
            myPro
                .wxRequest('store/editInfo', 'POST', params)
                .then((res) => {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    }); // 重新获取详情

                    that.getShopInfo();
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 提现
        goCashOut() {
            uni.navigateTo({
                url: '/pages/shopRole/cashout/index'
            });
        },

        // 提现记录
        goCashOutlog() {
            uni.navigateTo({
                url: '/pages/shopRole/cashoutlog/index'
            });
        },

        // 优惠券使用统计
        goShopCoupons() {
            let that = this;
            uni.navigateTo({
                url: '/pages/shopRole/usedcoupons/index'
            });
        },

        // 设置营业时间
        goBusinessTime() {
            let that = this;
            uni.navigateTo({
                url: '/pages/shopRole/businesstime/list/index'
            });
        }
    }
};
</script>
<style>
/* pages/shopInfo/index.wxss */
/* 用户信息 */
.userInfo {
    width: 100vw;
    height: 154rpx;
    background: #295c56;
    position: relative;
}
.info {
    padding-left: 40rpx;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.info_l {
    display: flex;
    align-items: center;
}
.thumb_wrap {
    width: 106rpx;
    height: 106rpx;
    background: rgba(255, 255, 255, 1);
    border-radius: 50%;
    position: relative;
}
.thumb {
    width: 100rpx;
    height: 100rpx;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}
/* .thumb img{
	border-radius:50%;
} */
.icon_vip {
    width: 56rpx;
    height: 22rpx;
    position: absolute;
    top: 0;
    left: 100rpx;
}
.name_wrap {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    padding-left: 30rpx;
    width: 440rpx;
}
.name_wrap .name {
    font-size: 36rpx;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.name_wrap .tel {
    font-size: 30rpx;
    /* padding-left: 20rpx; */
}
.name_wrap .van-icon-arrow {
    font-size: 30rpx;
    padding-left: 10rpx;
}
.tag {
    width: 130rpx;
    height: 45rpx;
    background: linear-gradient(-90deg, #295c56, rgba(255, 255, 255, 0.3));
    border-radius: 23rpx 0rpx 0rpx 23rpx;
    font-size: 28rpx;
    text-align: right;
    padding-right: 6rpx;
    line-height: 45rpx;
    color: #ffffff;
}
/* 充值 */
.item {
    width: 690rpx;
    height: 100rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rpx 0rpx 21rpx 0rpx rgba(0, 0, 0, 0.09);
    border-radius: 10rpx;
    margin: 30rpx auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.item.firstItem {
    margin: -60rpx auto 0;
}
.item .item_l {
    padding-left: 44rpx;
    display: flex;
}
.item .title {
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.87);
}
.item .cash {
    color: rgba(213, 76, 67, 1);
    padding-left: 20rpx;
    font-size: 36rpx;
    display: flex;
    align-items: baseline;
}
.item .cash .cash_tag {
    font-size: 24rpx;
    padding-right: 8rpx;
}
.item .item_r {
    padding-right: 20rpx;
}
.item .item_r.flex {
    display: flex;
    align-items: center;
}
/* 单选框 */
.radioGroup {
    display: flex;
    align-items: center;
}
.van-radio__label {
    margin-left: 10rpx !important;
    line-height: normal !important;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 1);
}
.van-radio__icon {
    width: 40rpx !important;
    height: 40rpx !important;
    border: 0 none !important;
    background: rgba(238, 238, 238, 1);
}
.unactive .van-radio__label {
    color: rgba(0, 0, 0, 0.54);
}
.radioGroup .van-radio {
    margin-left: 20rpx;
}
/* 时间选择 */
.time {
    width: 213rpx;
    height: 50rpx;
    background: rgba(255, 255, 255, 1);
    border: 1rpx solid rgba(0, 0, 0, 0.12);
    border-radius: 10rpx;
    text-align: center;
    color: rgba(89, 89, 89, 1);
}
/* .time{
	margin-left: 42rpx;
}
.time:first-of-type{
	margin-left: 0;
} */
.line {
    width: 18rpx;
    height: 2rpx;
    background: rgba(0, 0, 0, 0.12);
    margin: 0 12rpx;
}
/* 背景上的弧度 */
.bg {
    width: 750rpx;
    height: 34rpx;
    display: block;
}
.square {
    content: '';
    display: block;
    width: 26rpx;
    height: 26rpx;
    background: rgba(255, 255, 255, 1);
    opacity: 0.1;
    border-radius: 50%;
    position: absolute;
    bottom: 120rpx;
    right: 120rpx;
}
/*  */
.container {
    padding-bottom: 30rpx;
}
</style>