|
@@ -0,0 +1,551 @@
|
|
|
+<template>
|
|
|
+ <s-layout title="新用户注册" :bgStyle="{ color: '#fff' }">
|
|
|
+ <view class="content-block">
|
|
|
+ <uni-forms
|
|
|
+ ref="registerRef"
|
|
|
+ v-model="state.model"
|
|
|
+ :rules="state.rules"
|
|
|
+ validateTrigger="bind"
|
|
|
+ labelWidth="140"
|
|
|
+ labelAlign="left"
|
|
|
+ labelPosition="top"
|
|
|
+ >
|
|
|
+ <uni-forms-item name="shopName" label="店铺名" required>
|
|
|
+ <uni-easyinput
|
|
|
+ placeholder="请输入店铺名"
|
|
|
+ v-model="state.model.shopName"
|
|
|
+ paddingLeft="15"
|
|
|
+ >
|
|
|
+ </uni-easyinput>
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item name="shopkeeperName" label="店主姓名" required>
|
|
|
+ <uni-easyinput
|
|
|
+ placeholder="请输入店主姓名"
|
|
|
+ v-model="state.model.shopkeeperName"
|
|
|
+ paddingLeft="15"
|
|
|
+ >
|
|
|
+ </uni-easyinput>
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item
|
|
|
+ name="fullArea"
|
|
|
+ label="省市区"
|
|
|
+ required
|
|
|
+ @tap="state.showRegion = true"
|
|
|
+ >
|
|
|
+ <uni-easyinput
|
|
|
+ placeholder="点击选择"
|
|
|
+ v-model="state.fullArea"
|
|
|
+ type="number"
|
|
|
+ paddingLeft="15"
|
|
|
+ :styles="{ disableColor: 'transparent', borderColor: '#e5e5e5' }"
|
|
|
+ disabled
|
|
|
+ >
|
|
|
+ <template #right>
|
|
|
+ <image
|
|
|
+ style="width: 24rpx; height: 15rpx; margin-right: 30rpx"
|
|
|
+ :src="sheep.$url.static('/static/icons/arrow-down-icon.png')"
|
|
|
+ mode=""
|
|
|
+ ></image>
|
|
|
+ </template>
|
|
|
+ </uni-easyinput>
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item name="address" label="详细地址" required @tap="chooseAddress">
|
|
|
+ <uni-easyinput
|
|
|
+ placeholder="请输入详细地址"
|
|
|
+ v-model="state.model.address"
|
|
|
+ paddingLeft="15"
|
|
|
+ disabled
|
|
|
+ >
|
|
|
+ <template #right>
|
|
|
+ <view class="right-box" >
|
|
|
+ <image
|
|
|
+ style="width: 32rpx; height: 30rpx; margin-right: 30rpx"
|
|
|
+ :src="sheep.$url.static('/static/icons/address-icon.png')"
|
|
|
+ mode=""
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </uni-easyinput>
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item name="images" label="门头照片" required>
|
|
|
+ <s-uploader
|
|
|
+ v-model:url="state.images"
|
|
|
+ fileMediatype="image"
|
|
|
+ limit="5"
|
|
|
+ mode="grid"
|
|
|
+ :imageStyles="{ width: '200rpx', height: '200rpx' }"
|
|
|
+ />
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item
|
|
|
+ name="businessTime"
|
|
|
+ label="营业时间"
|
|
|
+ required
|
|
|
+ @tap="showTime('businessTime')"
|
|
|
+ >
|
|
|
+ <uni-easyinput
|
|
|
+ placeholder="请选择营业时间"
|
|
|
+ v-model="state.model.businessTime"
|
|
|
+ paddingLeft="15"
|
|
|
+ :styles="{ disableColor: 'transparent', borderColor: '#e5e5e5' }"
|
|
|
+ disabled
|
|
|
+ >
|
|
|
+ <template #right>
|
|
|
+ <image
|
|
|
+ style="width: 32rpx; height: 32rpx; margin-right: 30rpx"
|
|
|
+ :src="sheep.$url.static('/static/icons/calendar-icon.png')"
|
|
|
+ mode=""
|
|
|
+ ></image>
|
|
|
+ </template>
|
|
|
+ </uni-easyinput>
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item
|
|
|
+ name="deliveryTime"
|
|
|
+ label="送货时间"
|
|
|
+ required
|
|
|
+ @tap="showTime('deliveryTime')"
|
|
|
+ >
|
|
|
+ <!-- 时间弹窗 -->
|
|
|
+ <uni-easyinput
|
|
|
+ placeholder="请选择送货时间"
|
|
|
+ v-model="state.model.deliveryTime"
|
|
|
+ paddingLeft="15"
|
|
|
+ :styles="{ disableColor: 'transparent', borderColor: '#e5e5e5' }"
|
|
|
+ disabled
|
|
|
+ >
|
|
|
+ <template #right>
|
|
|
+ <image
|
|
|
+ style="width: 32rpx; height: 32rpx; margin-right: 30rpx"
|
|
|
+ :src="sheep.$url.static('/static/icons/calendar-icon.png')"
|
|
|
+ mode=""
|
|
|
+ ></image>
|
|
|
+ </template>
|
|
|
+ </uni-easyinput>
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="邀请码">
|
|
|
+ <uni-easyinput
|
|
|
+ placeholder="请输入邀请码"
|
|
|
+ v-model="state.model.inviteCode"
|
|
|
+ paddingLeft="15"
|
|
|
+ type="number"
|
|
|
+ >
|
|
|
+ </uni-easyinput>
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-forms>
|
|
|
+ <button class="toLoginBtn ss-reset-button" @tap="toRegister">注册</button>
|
|
|
+ <view class="agreement-box ss-flex">
|
|
|
+ <!-- <radio-group @change="onChange" class="ss-flex ss-col-center">
|
|
|
+ <label class="radio ss-flex"> -->
|
|
|
+ <radio
|
|
|
+ :checked="protocol"
|
|
|
+ color="var(--ui-BG-Main)"
|
|
|
+ style="transform: scale(0.8)"
|
|
|
+ @tap.top="onChange"
|
|
|
+ />
|
|
|
+ <view class="agreement-text ss-flex ss-col-center ss-m-l-8" :class="{'isAgreement': protocol}">
|
|
|
+ 我已阅读并同意
|
|
|
+ <view
|
|
|
+ class="tcp-text"
|
|
|
+ @tap.stop="
|
|
|
+ onProtocol(1, '用户协议', 'small:program:user:agreement')
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 《用户协议》
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- </label>
|
|
|
+ </radio-group> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="safe-box"></view>
|
|
|
+
|
|
|
+ <uni-popup
|
|
|
+ ref="timePopupRef"
|
|
|
+ background-color="#fff"
|
|
|
+ :mask-click="false"
|
|
|
+ borderRadius="24rpx"
|
|
|
+ >
|
|
|
+ <su-toolbar
|
|
|
+ cancelColor="#6666"
|
|
|
+ confirmColor="var(--ui-BG-Main)"
|
|
|
+ cancelText="取消"
|
|
|
+ confirmText="确定"
|
|
|
+ @cancel="timePopupRef.close()"
|
|
|
+ @confirm="confirm"
|
|
|
+ ></su-toolbar>
|
|
|
+ <picker-view
|
|
|
+ @change="bindChange"
|
|
|
+ class="picker-view"
|
|
|
+ :value="defaultIndex"
|
|
|
+ >
|
|
|
+ <picker-view-column>
|
|
|
+ <view class="item" v-for="(item, index) in columns[0]" :key="index">{{
|
|
|
+ item
|
|
|
+ }}</view>
|
|
|
+ </picker-view-column>
|
|
|
+ <picker-view-column>
|
|
|
+ <view class="item" v-for="(item, index) in columns[1]" :key="index">{{
|
|
|
+ item
|
|
|
+ }}</view>
|
|
|
+ </picker-view-column>
|
|
|
+ </picker-view>
|
|
|
+ </uni-popup>
|
|
|
+ <!-- 省市区弹窗 -->
|
|
|
+ <su-region-picker
|
|
|
+ v-if="state.showRegion"
|
|
|
+ :show="state.showRegion"
|
|
|
+ @cancel="state.showRegion = false"
|
|
|
+ @confirm="onRegionConfirm"
|
|
|
+ >
|
|
|
+ </su-region-picker>
|
|
|
+
|
|
|
+ <!-- 注册成功提示 -->
|
|
|
+ <uni-popup
|
|
|
+ ref="popupRef"
|
|
|
+ background-color="#fff"
|
|
|
+ :mask-click="false"
|
|
|
+ borderRadius="24rpx"
|
|
|
+ >
|
|
|
+ <view class="popup-box">
|
|
|
+ <view class="ss-flex ss-row-center">
|
|
|
+ <image
|
|
|
+ class="scuss-img"
|
|
|
+ :src="sheep.$url.static('/static/registerScu-img.png')"
|
|
|
+ mode=""
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ <view class="scuss-text"
|
|
|
+ >您的注册申请已经提交,审核通过之后我们将会短信通知您</view
|
|
|
+ >
|
|
|
+ <button class="toHomeBtn ss-reset-button" @tap="toHome">
|
|
|
+ 返回主页
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ <!-- <up-popup :show="registerScuShow" mode="center" :round="12" :closeOnClickOverlay="false" :safeAreaInsetBottom="false">
|
|
|
+ </up-popup> -->
|
|
|
+ </s-layout>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { onLoad } from "@dcloudio/uni-app";
|
|
|
+import sheep from "@/sheep";
|
|
|
+import _ from "lodash";
|
|
|
+import {
|
|
|
+ shopName,
|
|
|
+ shopkeeperName,
|
|
|
+ fullArea,
|
|
|
+ businessTime,
|
|
|
+ deliveryTime,
|
|
|
+ address,
|
|
|
+ images,
|
|
|
+} from "@/sheep/validate/form";
|
|
|
+import { reactive, ref, unref } from "vue";
|
|
|
+const state = reactive({
|
|
|
+ showRegion: false,
|
|
|
+ codeText: "获取验证码",
|
|
|
+ model: {
|
|
|
+ phone: "",
|
|
|
+ shopName: "",
|
|
|
+ shopkeeperName: "",
|
|
|
+ province: "",
|
|
|
+ city: "",
|
|
|
+ area: "",
|
|
|
+ address: "",
|
|
|
+ businessTime: "",
|
|
|
+ deliveryTime: "",
|
|
|
+ inviteCode:"",
|
|
|
+ latitude:"",//纬度
|
|
|
+ longitude:"",//经度
|
|
|
+ },
|
|
|
+ fullArea: "",
|
|
|
+ images: [],
|
|
|
+ rules: {
|
|
|
+ shopName,
|
|
|
+ shopkeeperName,
|
|
|
+ fullArea,
|
|
|
+ businessTime,
|
|
|
+ deliveryTime,
|
|
|
+ address,
|
|
|
+ images,
|
|
|
+ },
|
|
|
+});
|
|
|
+const protocol = ref(false);
|
|
|
+const popupRef = ref(null);
|
|
|
+const timePopupRef = ref(null);
|
|
|
+
|
|
|
+const registerScuShow = ref(false);
|
|
|
+const defaultIndex = ref([0, 0]);
|
|
|
+const timeType = ref();
|
|
|
+const timeShow = ref(true);
|
|
|
+const timeValue = ref([0, 0]);
|
|
|
+const columns = reactive([
|
|
|
+ [
|
|
|
+ "00:00",
|
|
|
+ "01:00",
|
|
|
+ "02:00",
|
|
|
+ "03:00",
|
|
|
+ "04:00",
|
|
|
+ "05:00",
|
|
|
+ "06:00",
|
|
|
+ "07:00",
|
|
|
+ "08:00",
|
|
|
+ "09:00",
|
|
|
+ "10:00",
|
|
|
+ "11:00",
|
|
|
+ "12:00",
|
|
|
+ "13:00",
|
|
|
+ "14:00",
|
|
|
+ "15:00",
|
|
|
+ "16:00",
|
|
|
+ "17:00",
|
|
|
+ "18:00",
|
|
|
+ "19:00",
|
|
|
+ "20:00",
|
|
|
+ "21:00",
|
|
|
+ "22:00",
|
|
|
+ "23:00",
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ "00:00",
|
|
|
+ "01:00",
|
|
|
+ "02:00",
|
|
|
+ "03:00",
|
|
|
+ "04:00",
|
|
|
+ "05:00",
|
|
|
+ "06:00",
|
|
|
+ "07:00",
|
|
|
+ "08:00",
|
|
|
+ "09:00",
|
|
|
+ "10:00",
|
|
|
+ "11:00",
|
|
|
+ "12:00",
|
|
|
+ "13:00",
|
|
|
+ "14:00",
|
|
|
+ "15:00",
|
|
|
+ "16:00",
|
|
|
+ "17:00",
|
|
|
+ "18:00",
|
|
|
+ "19:00",
|
|
|
+ "20:00",
|
|
|
+ "21:00",
|
|
|
+ "22:00",
|
|
|
+ "23:00",
|
|
|
+ ],
|
|
|
+]);
|
|
|
+
|
|
|
+onLoad((e) => {
|
|
|
+ state.model.phone = e.mobile;
|
|
|
+ getAreaData();
|
|
|
+});
|
|
|
+// 获取省市区
|
|
|
+const getAreaData = () => {
|
|
|
+ if (_.isEmpty(uni.getStorageSync("areaData"))) {
|
|
|
+ sheep.$api.data.area().then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ uni.setStorageSync("areaData", res.data);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
+const chooseAddress = ()=>{
|
|
|
+ uni.chooseLocation({
|
|
|
+ success:(res)=> {
|
|
|
+ state.model.address = res.name
|
|
|
+ state.model.latitude = res.latitude
|
|
|
+ state.model.longitude = res.longitude
|
|
|
+ // console.log('位置名称:' + res.name);
|
|
|
+ // console.log('详细地址:' + res.address);
|
|
|
+ // console.log('纬度:' + res.latitude);
|
|
|
+ // console.log('经度:' + res.longitude);
|
|
|
+ },
|
|
|
+ fail:(err)=>{
|
|
|
+ console.log(err,'err')
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+// 时间选择
|
|
|
+const showTime = (type) => {
|
|
|
+ timeType.value = type;
|
|
|
+ defaultIndex.value = [0, 0];
|
|
|
+ timePopupRef.value.open("bottom");
|
|
|
+};
|
|
|
+const confirm = () => {
|
|
|
+ state.model[timeType.value] =
|
|
|
+ columns[0][timeValue.value[0]] + "-" + columns[1][timeValue.value[1]];
|
|
|
+ timePopupRef.value.close();
|
|
|
+};
|
|
|
+const bindChange = (e) => {
|
|
|
+ timeValue.value = e.detail.value;
|
|
|
+};
|
|
|
+//勾选协议
|
|
|
+function onChange() {
|
|
|
+ protocol.value = !protocol.value;
|
|
|
+}
|
|
|
+
|
|
|
+const onRegionConfirm = (e) => {
|
|
|
+ const { city_name, district_name, province_name } = e;
|
|
|
+ state.fullArea = `${province_name}-${city_name}-${district_name}`;
|
|
|
+ state.model = {
|
|
|
+ ...state.model,
|
|
|
+ province: province_name,
|
|
|
+ city: city_name,
|
|
|
+ area: district_name,
|
|
|
+ };
|
|
|
+ state.showRegion = false;
|
|
|
+};
|
|
|
+
|
|
|
+const toHome = () => {
|
|
|
+ popupRef.value.close();
|
|
|
+ uni.switchTab({
|
|
|
+ url: "/pages/index/index",
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// async function onSelect({ type, data }) {
|
|
|
+// console.log(data,'data')
|
|
|
+// let msg = '';
|
|
|
+// const { data } = await sheep.$api.app.upload(data.tempFiles[0].path, 'default');
|
|
|
+// msg = {
|
|
|
+// from: 'customer',
|
|
|
+// mode: 'image',
|
|
|
+// date: new Date().getTime(),
|
|
|
+// content: {
|
|
|
+// url: fullurl,
|
|
|
+// path: path,
|
|
|
+// },
|
|
|
+// };
|
|
|
+// console.log(msg)
|
|
|
+// // if (msg) {
|
|
|
+// // socketSendMsg(msg, () => {
|
|
|
+// // scrollBottom();
|
|
|
+// // });
|
|
|
+// // // scrollBottom();
|
|
|
+// // chat.showTools = false;
|
|
|
+// // chat.showSelect = false;
|
|
|
+// // chat.selectMode = '';
|
|
|
+// // }
|
|
|
+// }
|
|
|
+
|
|
|
+// 查看协议
|
|
|
+function onProtocol(id, title, key) {
|
|
|
+ sheep.$router.go("/pages/public/richtext", {
|
|
|
+ id,
|
|
|
+ title,
|
|
|
+ key,
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 注册
|
|
|
+const registerRef = ref(null);
|
|
|
+const toRegister = async () => {
|
|
|
+ if (!protocol.value) {
|
|
|
+ sheep.$helper.toast("请先阅读并勾选协议");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const validate = await unref(registerRef)
|
|
|
+ .validate()
|
|
|
+ .catch((error) => {
|
|
|
+ console.log("error: ", error);
|
|
|
+ });
|
|
|
+ if (!validate) return;
|
|
|
+ if (state.images.length == 0) {
|
|
|
+ return sheep.$helper.toast("请上传门头照片");
|
|
|
+ }
|
|
|
+ let params = {
|
|
|
+ ...state.model,
|
|
|
+ picture: state.images.toString(),
|
|
|
+ };
|
|
|
+ sheep.$api.user
|
|
|
+ .addShopRegistration(params)
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res, "res");
|
|
|
+ if (res.code == 200) {
|
|
|
+ // registerScuShow.value = true
|
|
|
+ popupRef.value.open("center");
|
|
|
+ } else {
|
|
|
+ sheep.$helper.toast(res.msg);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ sheep.$helper.toast(res.msg);
|
|
|
+ });
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.picker-view {
|
|
|
+ height: 400rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+}
|
|
|
+.item {
|
|
|
+ line-height: 34px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.content-block {
|
|
|
+ padding: 0 60rpx;
|
|
|
+}
|
|
|
+::v-deep .is-disabled {
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+.icon {
|
|
|
+ width: 199rpx;
|
|
|
+ height: 199rpx;
|
|
|
+}
|
|
|
+.toLoginBtn {
|
|
|
+ height: 88rpx;
|
|
|
+ background: #f39801;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ margin-top: 30rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.agreement-box {
|
|
|
+ .tcp-text {
|
|
|
+ color: #f49700;
|
|
|
+ }
|
|
|
+
|
|
|
+ .agreement-text {
|
|
|
+ color: #adb5bd;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ .isAgreement {
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.safe-box {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(constant(safe-area-inset-bottom) / 5 * 3);
|
|
|
+ height: calc(env(safe-area-inset-bottom) / 5 * 3);
|
|
|
+ }
|
|
|
+
|
|
|
+.popup-box {
|
|
|
+ width: 590rpx;
|
|
|
+ padding: 40rpx;
|
|
|
+ .scuss-img {
|
|
|
+ width: 240rpx;
|
|
|
+ height: 240rpx;
|
|
|
+ }
|
|
|
+ .scuss-text {
|
|
|
+ color: #17191c;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 10rpx 0 28rpx;
|
|
|
+ padding: 0 28rpx;
|
|
|
+ }
|
|
|
+ .toHomeBtn {
|
|
|
+ height: 80rpx;
|
|
|
+ background: #f39801;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.right-box {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|