pet_uni/pages/OrderPage/index.vue

<template>
  <view class="body-background" :style="{
		backgroundImage:'url('+staticImage.wallpaperBgImage+')'
		}"></view>
	<HeaderNav title="预约服务" :is-back="true"></HeaderNav>
	<view class="app-wallpaper">
    <view class="addr-container">
      <view class="addr-content-container">
        <view class="addr-content">
          <view class="addr-content-main row" :style="{
          backgroundImage:'url('+staticImage.addrBg+')'
          }" @click="navTo('/pages/Addr/index?type=select')">
            <view class="main-img">
              <image mode="widthFix" class="img" :src="staticImage.addrAvatar"/>
            </view>
            <view class="main-content">
              <image mode="heightFix" class="img" :src="staticImage.addrFw"/>
              <view class="main-content-text" style="max-width:300rpx;">
                <u-text :text="address.info || '请输入具体地址'" color="#131313" size="30"></u-text>
              </view>
            </view>
            <view class="main-select-btn ">
              <view class="main-select-btn-gun"></view>
              <view class="main-select-btn-content row">
                <view class="content-img col-12">
                  <image mode="widthFix" class="img" :src="staticImage.addrBook"/>
                </view>
                <view class="content-text col-12">
                  选择地址
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="addr-background-container">
        <view class="addr-background-content"></view>
      </view>
    </view>
    <view class="order-container">
      <view class="order-content-container">
        <view class="order-content">
          <view class="order-content-main row">
            <view class="order-item row">
              <view class="item-title">
                服务日期
              </view>
              <view class="item-content row col">
                <view class="item-content-tag" v-for="(item,index) in timeList" v-if="timeList.length !== 0">
                  <view class="tag-text">
                    {{ item }}
                  </view>
                  <view class="tag-close" @click="delTime(index)">
                    <image mode="heightFix" class="img" :src="staticImage.tagClose"/>
                  </view>
                </view>
                <view class="" v-else @click="showCalendar">
                  <u-text text="请选择服务日期" size="28" color="#636363"></u-text>
                </view>
              </view>
              <view class="item-icon" @click="showCalendar">
                <u-icon name="arrow-right"></u-icon>
              </view>
            </view>
            <view class="order-item row">
              <view class="item-title">
                增值服务
              </view>
              <view class="item-content row col">
                <view class="item-content-tag">
                  <view class="tag-text">
                    洗澡
                  </view>
                  <view class="tag-close">
                    <image mode="heightFix" class="img" :src="staticImage.tagClose"/>
                  </view>
                </view>
                <view class="item-content-tag">
                  <view class="tag-text">
                    剪指甲
                  </view>
                  <view class="tag-close">
                    <image mode="heightFix" class="img" :src="staticImage.tagClose"/>
                  </view>
                </view>
              </view>
              <view class="item-icon">
                <u-icon name="arrow-right"></u-icon>
              </view>
            </view>
            <view class="order-item row" @click="navTo('/pages/UserCoupons/index?type=select')">
              <view class="item-title">
                选择优惠
              </view>
              <view class="item-content row col">
                <view class="item-content-text">
                  58元优惠券
                </view>
              </view>
              <view class="item-icon">
                <u-icon name="arrow-right"></u-icon>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="order-background-container">
        <view class="order-background-content"></view>
      </view>
    </view>
    <view class="order-container">
      <view class="order-content-container">
        <view class="order-content">
          <view class="order-content-main row">
            <view class="order-content-main-title-img">
              <image mode="heightFix" class="img" :src="staticImage.selectPet"/>
            </view>
            <view class="order-item pet-page-item row">
              <PetPage class="pet-page"></PetPage>
            </view>


          </view>
        </view>
      </view>
      <view class="order-background-container">
        <view class="order-background-content"></view>
      </view>
    </view>
    <view class="order-container">
      <view class="order-content-container">
        <view class="order-content">
          <view class="order-content-main row">
            <view class="order-content-main-title-img col-12">
              <image mode="heightFix" class="img" :src="staticImage.selectService"/>
            </view>
            <u-radio-group
              v-model="radioValue1"
              placement="row"
              @change="groupChange"
              :size="30"
              :icon-size="30"
              icon-color="#4DC3B8"
              active-color="#ffffff"
          >
            <view class="order-item pet-page-item row">
              <view class="order-item-container row" >

                <view class="order-item-col col-4" v-for="(item,index) in [1,2,3]">
                  <view class="order-item-content-group">
                    <view class="count-group-content">
                      <image mode="heightFix" class="img" :src="staticImage.groupImg"/>
                      <view class="group-title">专业服务</view>
                      <view class="group-desc">标准</view>
                      <view class="group-checkbox">
                        <u-radio
                            :customStyle="{marginBottom: '8px'}"
                            :key="index"
                            :name="item"
                            @change="radioChange"
                        >
                        </u-radio>
                      </view>
                    </view>
                    <view class="count-group-background">
                      <view class="count-background"></view>
                    </view>
                  </view>
                </view>

              </view>
            </view>
        </u-radio-group>

          </view>
        </view>
      </view>
      <view class="order-background-container">
        <view class="order-background-content"></view>
      </view>
    </view>
	</view>
  <view class="footer-menu row">
    <view class="row col">
      <view class="foot-menu-main-title row">
        <view class="main-title">费用共计</view>
        <view class="main-price">￥58.8</view>
        <view class="main-title">元</view>
      </view>
      <view class="foot-menu-checkbox-group row col">
        <view class="foot-menu-checkbox"></view>
        <view class="foot-menu-title">
          <text>阅读并同意</text><text class="foot-menu-url" @click="showAgreement">《上门喂养协议》</text>
        </view>
      </view>
    </view>
   <view class="">
     <MzButton
         title="立即下单"
         button-color="#4DC3B8"
         font-color="#FFFFFF"
         button-width="200rpx"
     >
     </MzButton>
   </view>
  </view>
  <uv-calendar ref="calendar" mode="multiple" title="选择服务日期" @confirm="timeSelect" color="#4DC3B8" round="40rpx">
    <template #footer>
        <MzButton button-color="#4DC3B8" button-width="90%" font-color="#fff" class="row" style="justify-content: center" @click="timeSelect">确定</MzButton>
    </template>
  </uv-calendar>

  <uv-popup ref="agreement" mode="bottom" round="20rpx" closeable safeAreaInsetTop safeAreaInsetBottom custom-style="position:relative;">
    <view class="title row" style="position:absolute;justify-content: center;width:100%;top:20rpx;left:0;">
      <view class="value col" style="position: relative;text-align: center;">

<!--        <u-text text="协议内容" size="38" color="#191919"></u-text>-->
        <view class="" style="position: relative;display:inline-block;">
          <view style="color:#191919;font-size:38rpx;display:inline-block;position: relative;z-index: 2;">协议内容</view>
          <view class="background" style="width:100%;height:50%;position: absolute;bottom:0;left:0;background-color:rgba(227, 191, 119, 0.6);display:inline-block;z-index:1;"></view>
        </view>
      </view>
    </view>
    <view style="padding:30rpx;">
      1、文字占位文字占位文字占位文字占位文字占位文字占位文字占位    2、文字占位文字占位文字占位文字占位文字占位文字占位文
    </view>
  </uv-popup>
	<!-- <RightNav></RightNav> -->
</template>

<script>
	import {
		imghost
	} from '@/config/host.js'
	import HeaderNav from '@/components/HeaderNav/Index.vue';
	import FooterNav from '@/components/FooterNav/Index.vue';
	import RightNav from '@/components/RightNav/Index.vue';
	import MzButton from '../../components/MzButton/Index.vue';
	import PetPage from '../../components/PetPage/Index.vue';
	import api from '@/utils/functions.js';
  import {cardDetail} from "@/api/card";
  import {getAddressList} from "@/api/address";
  import image from "@/config/image";
	export default {
		components: {
			HeaderNav,
			FooterNav,
			RightNav,
			MzButton,
      PetPage
		},
		data() {
			return {
        radioValue1:[],
        list: ['未付款', '待评价', '已付款'],
        curNow: 0,
        id:'',
				title: 'Hello',
				loading: true,
        timeList:[],
				staticImage: image.OrderPage,
				isTop: false,
				pagePadding: 100,
				orderCardList:[
					{
						title:'成都市武侯区丰德国际4栋...',
						tags:['刷毛','洗澡'],
						do_time:'2023/05/03 15—17时',
						create_time:'2023/03/03 15:23:22',
					},
					{
						title:'成都市武侯区丰德国际4栋...',
						tags:['刷毛','洗澡'],
						do_time:'2023/05/03 15—17时',
						create_time:'2023/03/03 15:23:22',
					},
				],
        couponsList: [{
          price: '57',
          title: '57元抵扣券',
          cause: '满0.01使用',
          coupons_number:10,
          time: '满0.01元使用仅限线上预约下单使用',
          is_timeout: false,
        }],
        address:{},
			}
		},
		onLoad(options) {
      this.id = options.id;
      this.getCardDetail();
		},
    onShow(){
      this.getDefaultAddress();
    },
		methods: {
      getDefaultAddress() {
        let cacheAddress = uni.getStorageSync('address');
        if (cacheAddress) {
          console.log('hasCacheAddress')
          console.log(cacheAddress)
          this.address = cacheAddress;
        } else {
          getAddressList({}).then(res => {
            res.data.forEach(item => {
              if (item.is_default === 1) {
                this.address = item;
              }
            });
          })
          console.log(this.address)
        }
      },
      delTime(index){
        this.timeList.splice(index,1);
      },
      timeSelect(e){
        this.timeList = this.$refs.calendar.selected;
        this.$refs.calendar.close();
      },
      showAgreement(){
        this.$refs.agreement.open();
      },
      navTo(url){
        uni.navigateTo({
          url:url
        })
      },
      getCardDetail(){
        cardDetail({
          id:this.id
        }).then((res) => {
          console.log(res)
        })
      },
      sectionChange(index) {
        this.curNow = index;
      },
      radioChange(n) {
        console.log('radioChange', n);
      },
      groupChange(n) {
        console.log('radioChange', n);
      },
      confirm(){},
      showCalendar(){
        this.$refs.calendar.open();
      },

		},
		onPageScroll(res) {
			if(res.scrollTop <= 20){
				uni.$emit('isTop', true);
			}else{
				uni.$emit('isTop', false);
			}
		},
		created() {
			this.pagePadding = (api.navHeight().navPaddingTop +
				api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
		},
    mounted() {

    },
	}
</script>

<style lang="scss">
	@import './components/index.scss';
</style>