|
|
@@ -1,94 +1,271 @@
|
|
|
<template>
|
|
|
<view class="box">
|
|
|
- <u-navbar title="翔安澳洲线" autoBack :placeholder="true" bgColor="#fee1b9"></u-navbar>
|
|
|
+ <u-navbar :title="activityTitle" autoBack :placeholder="true" bgColor="#fee1b9"></u-navbar>
|
|
|
+
|
|
|
<view class="ban">
|
|
|
- <view class="" style="margin-bottom: 30rpx">
|
|
|
- <u-swiper :list="bannerlist" imgMode="aspectFill" :height="180" :autoplay="true" :circular="true"></u-swiper>
|
|
|
+ <view class="hdjs_box">
|
|
|
+ <view class="hdjs_tit">活动介绍</view>
|
|
|
+ <view class="hdjs_xq" style="overflow: scroll">{{activityDesc}}</view>
|
|
|
</view>
|
|
|
+
|
|
|
<!-- -->
|
|
|
- <view class="xq_tit">荻花洲起点 - 澳头终点 澳洲线介绍</view>
|
|
|
- <view class="xq_js">落日余晖千百态，浏江古渡荻花洲。傍晚海风习习的海滩上，露营的家庭、玩沙的孩童、拍夕阳的情侣，都为惬意的海湾悠闲添上了几分松弛感。</view>
|
|
|
- <!-- 报名 -->
|
|
|
- <view @click="goRegister" class="bm_btn">立即报名</view>
|
|
|
- <view class="ld">活动详情</view>
|
|
|
- <view class="hd_xq">
|
|
|
- <div>
|
|
|
- <text>活动时间:</text>
|
|
|
- <text>2024年12月18日</text>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <text>活动起点:</text>
|
|
|
- <text>翔安区荻花洲</text>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <text>报名费用:</text>
|
|
|
- <text>免费</text>
|
|
|
- </div>
|
|
|
- <div style="margin-bottom: 40rpx">
|
|
|
- <text>活动流程:</text>
|
|
|
- <text>...</text>
|
|
|
- </div>
|
|
|
+ <view class="ld">报名资料填写</view>
|
|
|
+ <view class="radio_box">
|
|
|
+ <u-radio-group
|
|
|
+ v-model="scheduleValue"
|
|
|
+ placement="column"
|
|
|
+
|
|
|
+ >
|
|
|
+ <u-radio
|
|
|
+ :customStyle="{marginBottom: '8px'}"
|
|
|
+ v-for="(item, index) in scheduleList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.desc"
|
|
|
+ :name="item.id"
|
|
|
+ @change="scheduleChange"
|
|
|
+ >
|
|
|
+ </u-radio>
|
|
|
+ </u-radio-group>
|
|
|
</view>
|
|
|
- <view class="ld">活动日程</view>
|
|
|
- <view class="rc_box">
|
|
|
- <view style="margin-top: 8rpx">
|
|
|
- <u-icon name="clock" color="#57bdc3" size="12"></u-icon>
|
|
|
+
|
|
|
+ <!-- 动态表单 -->
|
|
|
+ <block v-for="item in signupParams" :key="item.id">
|
|
|
+ <view @click="getTitle(item)" class="" style="margin-top: 30rpx;">
|
|
|
+ <text >{{ item.title }}</text>
|
|
|
+ <!-- <text v-if="item.tip" class="tip">{{ item.tip }}</text> -->
|
|
|
+ <!-- 根据 type 属性决定渲染哪种类型的输入 -->
|
|
|
+ <u--input v-if="item.type === 'string'"
|
|
|
+ v-model="item.value"
|
|
|
+ border="surround"
|
|
|
+ @change="onInput"
|
|
|
+ :placeholder="item.tip" />
|
|
|
+
|
|
|
+ <u-radio-group v-if="item.type === 'radio'" placement="column">
|
|
|
+ <u-radio v-for="(fruitName, fruitId) in item.params" :key="fruitId"
|
|
|
+ :label="fruitName"
|
|
|
+ :name="fruitName"
|
|
|
+ @change="radioChange"
|
|
|
+ :customStyle="{ marginBottom: '8px', height: '30px' }"
|
|
|
+ >
|
|
|
+ <!-- {{ fruitName }} -->
|
|
|
+ </u-radio>
|
|
|
+ </u-radio-group>
|
|
|
+
|
|
|
+ <!-- 其他类型可以根据需要添加 -->
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+
|
|
|
+ <view class="bm_btn" @click="tjcyBtn">添加家庭成员</view>
|
|
|
+ <view class="cy_box" v-for="(item,index) in cyList" :key="index">
|
|
|
+ <view class="" style="display: flex;">
|
|
|
+ <view class="icon_box">
|
|
|
+ <u-icon name="account" color="#000000" size="20"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view style="margin-left: 20rpx">
|
|
|
+ <view class="cy_name">{{item.name}}</view>
|
|
|
+ <view class="cy_age">年龄:{{item.age}}</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view style="margin-left: 30rpx; color: black">
|
|
|
- <view class="">起跑时间</view>
|
|
|
- <view class="star_time">8:00 AM</view>
|
|
|
+
|
|
|
+ <view @click="removePassenger(index)" style="width: 60rpx;height: 60rpx;">
|
|
|
+ <u-icon name="trash" color="#858789" size="20" ></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- -->
|
|
|
- <view class="rc_box">
|
|
|
- <view class="yuan"></view>
|
|
|
- <view style="margin-left: 30rpx; color: black">
|
|
|
- <view class="">路线站点</view>
|
|
|
- <view class="star_time">沿途站点</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- -->
|
|
|
- <view class="rc_box">
|
|
|
- <view class="yuan"></view>
|
|
|
- <view style="margin-left: 30rpx; color: black">
|
|
|
- <view class="">文物讲解</view>
|
|
|
- <view class="star_time">每个站点的文物讲解</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- -->
|
|
|
- <view class="rc_box">
|
|
|
- <view style="margin-top: 8rpx">
|
|
|
- <u-icon name="clock" color="#57bdc3" size="12"></u-icon>
|
|
|
- </view>
|
|
|
- <view style="margin-left: 30rpx; color: black">
|
|
|
- <view class="">终点庆祝</view>
|
|
|
- <view class="star_time">8:00 AM</view>
|
|
|
+
|
|
|
+ <view class="tjbm_btn">提交报名</view>
|
|
|
+ <!-- 阅读协议 -->
|
|
|
+ <view class="ydxy">
|
|
|
+ <u-checkbox-group @change="xyShow=!xyShow" >
|
|
|
+ <u-checkbox v-model="xyShow" shape="circle" ></u-checkbox>
|
|
|
+ </u-checkbox-group>
|
|
|
+ <view class="" @click="volhow=true">
|
|
|
+ 阅读并同意《隐私政策》和《用户协议》
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
</view>
|
|
|
+
|
|
|
+ <!-- 协议弹层 -->
|
|
|
+ <u-popup bgColor="#f2c8a2" :show="volhow" mode="center" customStyle="width:600rpx;padding: 30rpx;" round="20rpx">
|
|
|
+ <view style="text-align: center; font-size: 30rpx">请阅读以下协议</view>
|
|
|
+ <view style="margin-top: 20rpx"></view>
|
|
|
+ <view class="bt_box">
|
|
|
+
|
|
|
+ <view @click="volhow=false" class="bt2">我已知悉</view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ let that;
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- bannerlist: ['https://img2.baidu.com/it/u=443975182,626431415&fm=253&fmt=auto&app=120&f=JPEG?w=627&h=418']
|
|
|
+ signupParams : [
|
|
|
+ // {
|
|
|
+ // id: 1,
|
|
|
+ // name: "fruit",
|
|
|
+ // group: "basic",
|
|
|
+ // title: "请选择参赛类型",
|
|
|
+ // tip: "请选择一款水果",
|
|
|
+ // type: "radio",
|
|
|
+ // value: "",
|
|
|
+ // content: { 1: "1.5公里线路(适合家庭及儿童)", 2: "3公里线路(适合初学者)", 3: "5公里线路(适合跑步爱好者)" },
|
|
|
+ // rule: "required"
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: "name",
|
|
|
+ group: "basic",
|
|
|
+ title: "姓名",
|
|
|
+ tip: "请填写姓名",
|
|
|
+ type: "string",
|
|
|
+ value: "张宁",
|
|
|
+ rule: "required"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: "name",
|
|
|
+ group: "basic",
|
|
|
+ title: "年龄",
|
|
|
+ tip: "请填写年龄",
|
|
|
+ type: "string",
|
|
|
+ value: "18",
|
|
|
+ rule: "required"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ name: "name",
|
|
|
+ group: "basic",
|
|
|
+ title: "手机",
|
|
|
+ tip: "请填写手机号",
|
|
|
+ type: "string",
|
|
|
+ value: "1866166265",
|
|
|
+ rule: "required"
|
|
|
+ },
|
|
|
+
|
|
|
+ ],
|
|
|
+ activityId: 1,
|
|
|
+ activityDesc: '',
|
|
|
+ activityTitle: '',
|
|
|
+ volhow:false,
|
|
|
+ xyShow:false,
|
|
|
+ mobile: '',
|
|
|
+ mailbox: '',
|
|
|
+ // 家庭成员
|
|
|
+ cyList:[],
|
|
|
+ ydxyShow:false,
|
|
|
+ // 默认选中第一个
|
|
|
+ scheduleValue: 1,
|
|
|
+ scheduleList: [],
|
|
|
+ params:{
|
|
|
+ scheduleValue: 1,
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
+ onLoad(option) {
|
|
|
+ console.log(option);
|
|
|
+ that = this;
|
|
|
+ that.activityId = option.id;
|
|
|
+ that.activityDesc = option.desc;
|
|
|
+ that.activityTitle = option.title;
|
|
|
+ that.getActivityScheduleList(that.activityId);
|
|
|
+ that.getActivitySignupParams(that.activityId);
|
|
|
+ this.loadPassengers();
|
|
|
+ },
|
|
|
methods: {
|
|
|
- goRegister() {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/index_fenbao/XuanJiangYuan/xq_page'
|
|
|
- });
|
|
|
- }
|
|
|
+ //获取活动日程列表
|
|
|
+ getActivityScheduleList(id) {
|
|
|
+ this.$api.activityScheduleList(
|
|
|
+ {
|
|
|
+ activity_id: id
|
|
|
+ },
|
|
|
+ data => {
|
|
|
+ if (data.code == 0) {
|
|
|
+ that.$common.errorToShow(data.msg);
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ that.scheduleList = data.data;
|
|
|
+ // console.log(that.scheduleList);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ //获取活动报名参数
|
|
|
+ getActivitySignupParams(id) {
|
|
|
+ this.$api.activitySignupParams(
|
|
|
+ {
|
|
|
+ activity_id: id
|
|
|
+ },
|
|
|
+ data => {
|
|
|
+ if (data.code == 0) {
|
|
|
+ that.$common.errorToShow(data.msg);
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ that.signupParams = data.data;
|
|
|
+ console.log(that.signupParams);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ // 从本地存储中获取乘客信息
|
|
|
+ loadPassengers() {
|
|
|
+ const storedSelectedPassengers = uni.getStorageSync('selectedPassengers');
|
|
|
+ if (storedSelectedPassengers) {
|
|
|
+ this.cyList = storedSelectedPassengers;
|
|
|
+ } else {
|
|
|
+ this.cyList = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getTitle(title) {
|
|
|
+ console.log(title, 'title');
|
|
|
+ },
|
|
|
+ radioChange(n) {
|
|
|
+ console.log(n, 'n');
|
|
|
+ let title = '性别';
|
|
|
+ that.params[title] = n;
|
|
|
+ console.log(that.params);
|
|
|
+ },
|
|
|
+ scheduleChange(n) {
|
|
|
+ that.scheduleValue = n;
|
|
|
+ that.params.scheduleValue = n;
|
|
|
+ console.log(that.params);
|
|
|
+ console.log('scheduleChange',that.scheduleValue);
|
|
|
+ },
|
|
|
+ onInput(e) {
|
|
|
+ // 更新字符串值
|
|
|
+ console.log(e)
|
|
|
+ },
|
|
|
+ tjcyBtn(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/index_fenbao/XuanJiangYuan/ck_page'
|
|
|
+ });
|
|
|
+},
|
|
|
+ removePassenger(index) {
|
|
|
+ // 移除乘客并更新本地存储
|
|
|
+ this.cyList.splice(index, 1);
|
|
|
+ // 更新本地存储中的乘客信息
|
|
|
+ uni.setStorageSync('passengers', this.cyList);
|
|
|
+ // 提示删除成功
|
|
|
+ uni.showToast({
|
|
|
+ title: '删除成功',
|
|
|
+ icon: 'success'
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
.box {
|
|
|
- height: auto;
|
|
|
+ min-height: 100%;
|
|
|
+height: auto;
|
|
|
width: 100%;
|
|
|
padding-bottom: 50rpx;
|
|
|
background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/gj_bg.png');
|
|
|
@@ -99,18 +276,47 @@ export default {
|
|
|
width: 92%;
|
|
|
margin: auto;
|
|
|
}
|
|
|
-.xq_tit {
|
|
|
+.top_tit {
|
|
|
+ width: 100%;
|
|
|
+ height: 60rpx;
|
|
|
color: black;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 700;
|
|
|
+ line-height: 60rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 30rpx;
|
|
|
+ background-color: #fee1b9;
|
|
|
}
|
|
|
-.xq_js {
|
|
|
+.hdjs_box {
|
|
|
+ height: 200rpx;
|
|
|
color: black;
|
|
|
- font-size: 28rpx;
|
|
|
margin-top: 10rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- height: 160rpx;
|
|
|
- overflow: scroll;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ background-color: #fff0e3;
|
|
|
+}
|
|
|
+.hdjs_box2 {
|
|
|
+ color: black;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ background-color: #fff0e3;
|
|
|
+}
|
|
|
+.hdjs_tit {
|
|
|
+ font-size: 30rpx;
|
|
|
+}
|
|
|
+.hdjs_xq {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+}
|
|
|
+.ld {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+.u-input.data-v-113bc24f {
|
|
|
+ background-color: #fee1b9 !important ;
|
|
|
+ margin-top: 20rpx;
|
|
|
}
|
|
|
.bm_btn {
|
|
|
width: 100%;
|
|
|
@@ -118,36 +324,69 @@ export default {
|
|
|
font-size: 30rpx;
|
|
|
line-height: 80rpx;
|
|
|
text-align: center;
|
|
|
- color: #ffffff;
|
|
|
+ color: black;
|
|
|
border-radius: 10rpx;
|
|
|
- background-color: #fb5a02;
|
|
|
- margin-bottom: 60rpx;
|
|
|
+ background-color: #fee1b9;
|
|
|
+ margin-top: 20rpx;
|
|
|
+}.bt2 {
|
|
|
+ width: 244rpx;
|
|
|
+ height: 78rpx;
|
|
|
+ background: #ca5642;
|
|
|
+ border-radius: 39rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 78rpx;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
-.ld {
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: 700;
|
|
|
- margin-bottom: 20rpx;
|
|
|
+.cy_box {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.icon_box {
|
|
|
+ width: 90rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: #fee1b9;
|
|
|
+ border-radius: 10rpx;
|
|
|
}
|
|
|
-.hd_xq {
|
|
|
+.cy_name {
|
|
|
color: black;
|
|
|
- line-height: 40rpx;
|
|
|
- font-size: 26rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
}
|
|
|
-.rc_box {
|
|
|
+.cy_age {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #858789;
|
|
|
+}
|
|
|
+.bt_box {
|
|
|
display: flex;
|
|
|
- margin-left: 10rpx;
|
|
|
- margin-top: 20rpx;
|
|
|
+ margin-top: 50rpx;
|
|
|
+ justify-content: space-around;
|
|
|
}
|
|
|
-.star_time {
|
|
|
- color: #928f8f;
|
|
|
- font-size: 26rpx;
|
|
|
- line-height: 45rpx;
|
|
|
+.tjbm_btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ background-color: #fb5a02;
|
|
|
+ margin-top: 50rpx;
|
|
|
}
|
|
|
-.yuan {
|
|
|
- width: 16rpx;
|
|
|
- height: 16rpx;
|
|
|
- border-radius: 50%;
|
|
|
- margin-top: 10rpx;
|
|
|
- border: 2rpx solid #57bdc3;
|
|
|
+.ydxy{
|
|
|
+ display: flex;
|
|
|
+align-items: center;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ height: 50rpx;
|
|
|
+
|
|
|
+ font-size: 24rpx;
|
|
|
+ color:#03A9F4;
|
|
|
+}
|
|
|
+.radio_box{
|
|
|
+ background-color: #fee1b9;
|
|
|
+ padding: 20rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
}
|
|
|
</style>
|
wangshuo
