jiangchengfeiyi-xiaochengxu/pages/book/component/feeTips.vue

<template>
	<view class="flex-col page">
	  <view class="flex-col self-stretch">
	    <text class="self-center text">费用说明</text>
	    <view class="flex-col self-stretch group mt-13">
	      <text class="self-start font">一、费用支付流程</text>
	      <text class="self-stretch font_2 text_2 mt-3">
	        确定等级：您将根据个人需求选择合适的服装价位区间，并完成预约操作。
	        <br />
	        预约成功：预约成功后，您需前往店铺挑选对应等级的服装。
	        <br />
	        补缴尾款及押金：在挑选服装时，您需要补缴尾款（扣除已支付定金后的剩余服务或商品费用）以及押金（用于保障服装归还时的完好）。
	      </text>
	    </view>
	  </view>
	  <view class="flex-col self-stretch group_2">
	    <text class="self-start font">二、尾款具体事项</text>
	    <text class="self-stretch font_2 text_3 mt-5">
	      租赁服装：若您选择租赁我们店铺没有的服装，租赁费用将在您支付尾款时一并结算。无论拍摄是否进行，租赁费用均不予退还。
	      <br />
	      购买服装：如您希望购买我们店铺的服装，且我们同意购买，将按照服装的稀有程度分等级定价。您需按照所选等级支付尾款。
	      <br />
	      定制服务：若您自带衣服，我们提供妆发及摄影服务。若需我们额外购买服装，将按照上述等级定价，您需支付相应的尾款。
	    </text>
	  </view>
	  <view class="flex-col self-stretch group_3">
	    <text class="self-start font_3 text_4">三、定金与押金说明</text>
	    <text class="self-stretch font_2 text_5 mt-9">
	      定金：预约时支付的定金用于确认您的预约意向，定金不予退还。
	      <br />
	      押金：拍摄完成后，我们将根据服装的归还情况决定是否扣除押金。若服装无损坏，押金将全额退还。
	    </text>
	  </view>
	  <view class="flex-col self-stretch group_4">
	    <text class="self-start font_3 text_6">四、特殊情况处理</text>
	    <view class="mt-14 self-stretch text-wrapper">
	      <text class="font_2 text_7">
	        若因特殊情况您需要取消预约，请及时与我们联系。未拍摄情况下，定金不予退还，已支付的租赁费用亦不退还。
	        <br />
	      </text>
	    </view>
	  </view>
	</view>
	<view @click="closeFeeTips" class="flex-col justify-start items-center self-center text-wrapper_2">
	    <text class="font_3 text_8">我知道了</text>
	  </view>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import emitter from '../../../utils/emitter';
import { onLoad } from "@dcloudio/uni-app";
import { getFonts } from '../../../common/globalFont';

	onLoad(() => {
		getFonts()
	})

	const closeFeeTips = () => {
		emitter.emit('closeFeeTips')
	}

</script>

<style scoped lang="scss">
	.mt-13 {
	  margin-top: 26.71rpx;
	}
	.mt-3 {
	  margin-top: 6.16rpx;
	}
	.mt-5 {
	  margin-top: 10.27rpx;
	}
	.mt-9 {
	  margin-top: 18.49rpx;
	}
	.page {
	  padding: 36.99rpx 24.66rpx 45.21rpx 28.77rpx;
	  background-color: #ffffff;
	  border-radius: 41.1rpx;
	  width: 100%;
	  overflow-y: auto;
	  overflow-x: hidden;
	  height: 750rpx;
	}
	.text {
	  color: #000000;
	  font-size: 36.99rpx;
	  font-family: FangZhengFonts;
	  line-height: 36.12rpx;
	}
	.group {
	  margin-right: 8.22rpx;
	}
	.font {
	  font-size: 32.88rpx;
	  font-family: FangZhengFonts;
	  line-height: 39.04rpx;
	  color: #323232;
	}
	.font_2 {
	  font-size: 28.77rpx;
	  font-family: FangZhengFonts;
	  line-height: 34.93rpx;
	  color: #323232;
	}
	.text_2 {
	  margin-left: 24.66rpx;
	}
	.group_2 {
	  margin-top: 45.21rpx;
	}
	.text_3 {
	  margin-left: 20.55rpx;
	}
	.group_3 {
	  margin-top: 45.21rpx;
	}
	.font_3 {
	  font-size: 32.88rpx;
	  font-family: FangZhengFonts;
	  line-height: 31.73rpx;
	  color: #323232;
	}
	.text_4 {
	  line-height: 30.82rpx;
	}
	.text_5 {
	  margin-left: 20.55rpx;
	}
	.group_4 {
	  margin: 57.53rpx 24.66rpx 0 4.11rpx;
	}
	.text_6 {
	  line-height: 32.12rpx;
	}
	.text-wrapper {
	  margin-left: 4.11rpx;
	  line-height: 34.93rpx;
	}
	.text_7 {
	  margin-left: 8.22rpx;
	}
	.text-wrapper_2 {
	  margin-top: 49.32rpx;
	  padding: 24.66rpx 0;
	  background-color: #e79ea1;
	  border-radius: 82.19rpx;
	  width: 450.07rpx;
	  position: absolute;
	  bottom: 30rpx;
	  left: 0;
	  right: 0;
	  margin: 0 auto;
	}
	.text_8 {
	  color: #ffffff;
	}
	
	@import url(../../../common/css/global.css);
</style>