You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

310 lines
6.9 KiB

10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
  1. <template>
  2. <view class="content">
  3. <view class="banner"></view>
  4. <view class="b-relative" style="width: 710rpx;height: 310rpx; margin: -174rpx auto 0;">
  5. <image src="/static/ms/settled.png" style="width: 710rpx;height: 310rpx;"></image>
  6. <view class="banner-font">
  7. <image style="width: 380rpx;height: 98rpx;" src="/static/ms/fontjszm.png"></image>
  8. </view>
  9. <view class="font-3">打造专业的技术服务</view>
  10. <view class="banner-button">立即联系我们>></view>
  11. </view>
  12. <view>
  13. <view class="item-card">
  14. <view class="serrled-title">
  15. <view class="before"></view>
  16. 店铺信息
  17. </view>
  18. <view class="item-line flex">
  19. <view class="label">店铺名称</view>
  20. <input placeholder="请输入店铺名称" v-model="technician.name" />
  21. </view>
  22. <view class="item-line flex">
  23. <view class="label">你的姓名</view>
  24. <input placeholder="请输入姓名" v-model.number="technician.username" />
  25. </view>
  26. <view class="item-line flex">
  27. <view class="label">联系方式</view>
  28. <input placeholder="请输入联系方式" v-model="technician.phone" />
  29. </view>
  30. <view class="item-line flex">
  31. <view class="label">所在地区</view>
  32. <input placeholder="请输入所在地区" v-model="technician.city" />
  33. </view>
  34. <view class="item-line flex">
  35. <view class="label">详细地址</view>
  36. <textarea v-model="technician.detailAddress" placeholder="请输入详细地址" class="textarea"></textarea>
  37. </view>
  38. </view>
  39. </view>
  40. <view class="b-fiexd">
  41. <view @click="addOrUpdateMsgTer" class="button-submit">提交</view>
  42. </view>
  43. </view>
  44. </template>
  45. <script>
  46. import OSS from "ali-oss"
  47. import {
  48. v4 as uuidv4
  49. } from 'uuid';
  50. import {
  51. showDialog
  52. } from 'vant';
  53. export default {
  54. data() {
  55. return {
  56. technician: {
  57. id: '',
  58. name: '',
  59. phone: '',
  60. username: '',
  61. city: '',
  62. phone: '',
  63. detailAddress : ''
  64. }
  65. }
  66. },
  67. onShow() {
  68. this.getTenFans()
  69. },
  70. methods: {
  71. getUserInfo() { //获取用户信息
  72. this.$api('getUserInfo', {}, res => {
  73. if (res.code == 200) {
  74. this.userInfo = res.result;
  75. }
  76. })
  77. },
  78. addOrUpdateMsgTer() { //新增修改技师入驻信息
  79. let isOk = this.parameterVerification()
  80. if (!isOk.auth) {
  81. return uni.showToast({
  82. title: isOk.title,
  83. icon: 'none'
  84. })
  85. }
  86. this.$api('addOrUpdateMsgTer', this.technician, res => {
  87. if (res.code == 200) {
  88. showDialog({
  89. title: this.technician.id ? '修改入驻' : '技师入驻',
  90. message: this.technician.id ? '技师入驻修改成功' : '技师入驻提交成功',
  91. }).then(() => {
  92. uni.switchTab({
  93. url: '/pages/index/index'
  94. })
  95. });
  96. }
  97. })
  98. },
  99. parameterVerification() { //验证用户参数合法性
  100. let { name, sex, phone, age, city, image } = this.technician
  101. if (name.trim() == '') {
  102. return { title: '请填写技师姓名', auth: false }
  103. } else if (sex.trim() == '') {
  104. return { title: '请选择性别', auth: false }
  105. } else if (phone.trim() == '') {
  106. return { title: '请填写手机号', auth: false }
  107. } else if (!age) {
  108. return { title: '请填写年龄', auth: false }
  109. } else if (city.trim() == '') {
  110. return { title: '请填写意向城市', auth: false }
  111. } else if (image.trim() == '') {
  112. return { title: '请上传近期照片', auth: false }
  113. } else if (phone.trim() != '') {
  114. if (!this.$utils.verificationPhone(phone)) {
  115. return { title: '手机号格式不合法', auth: false }
  116. }
  117. }
  118. return {
  119. title: '验证通过',
  120. auth: true
  121. }
  122. },
  123. getTenFans() { //获取我推荐的技师记录
  124. this.$api('getTenFans', {}, res => {
  125. if (res.code == 200) {
  126. if (res.result.length > 0) {
  127. let { id, name, sex, age, city, image, phone } = res.result[0];
  128. this.technician = { id , name, sex, age, city, image, phone }
  129. }
  130. }
  131. })
  132. }
  133. }
  134. }
  135. </script>
  136. <style>
  137. body {
  138. background-color: #f5f5f5;
  139. }
  140. .banner {
  141. width: 100vw;
  142. height: calc(392rpx - 160rpx);
  143. }
  144. .banner-font {
  145. width: 292rpx;
  146. height: 142rpx;
  147. font-size: 72rpx;
  148. line-height: 66rpx;
  149. font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  150. font-weight: 400;
  151. text-align: left;
  152. color: #ffffff;
  153. letter-spacing: -1;
  154. text-shadow: 0px 6px 6px 0px rgba(0, 165, 141, 0.70);
  155. position: absolute;
  156. left: 52rpx;
  157. top: 34rpx;
  158. }
  159. .font-3 {
  160. height: 28rpx;
  161. line-height: 28rpx;
  162. font-size: 24rpx;
  163. font-family: PingFang SC, PingFang SC-Regular;
  164. font-weight: 400;
  165. text-align: left;
  166. color: #ffffff;
  167. text-shadow: 0 4rpx 6rpx 0 rgba(0, 165, 141, 0.70);
  168. position: absolute;
  169. left: 52rpx;
  170. top: 138rpx;
  171. }
  172. .banner-button {
  173. width: 240rpx;
  174. height: 56rpx;
  175. line-height: 56rpx;
  176. background: #ffdb75;
  177. border-radius: 24rpx;
  178. box-shadow: 0 6rpx 6rpx 0 rgba(17, 106, 93, 0.23);
  179. position: absolute;
  180. left: 52rpx;
  181. top: 220rpx;
  182. font-size: 24rpx;
  183. font-family: PingFang SC, PingFang SC-Bold;
  184. font-weight: 700;
  185. text-align: center;
  186. color: #EF7683;
  187. }
  188. .item-card {
  189. width: calc(710rpx - 40rpx);
  190. height: 840rpx;
  191. background: #ffffff;
  192. border-radius: 16rpx;
  193. margin: 40rpx auto 20rpx;
  194. padding: 1rpx 20rpx;
  195. }
  196. .serrled-title {
  197. display: flex;
  198. align-items: center;
  199. margin: 20rpx 0rpx;
  200. font-size: 30rpx;
  201. font-weight: bold;
  202. }
  203. .serrled-title .before {
  204. content: '';
  205. width: 8rpx;
  206. height: 32rpx;
  207. background: #FAA8B0;
  208. border-radius: 4rpx;
  209. margin-right: 10rpx;
  210. }
  211. .item-line {
  212. height: 60rpx;
  213. font-size: 28rpx;
  214. font-family: PingFang SC, PingFang SC-Bold;
  215. font-weight: 700;
  216. text-align: left;
  217. color: #333333;
  218. margin-top: 40rpx;
  219. }
  220. .item-line .label {
  221. display: flex;
  222. align-items: center;
  223. width: 152rpx;
  224. height: 60rpx;
  225. }
  226. .item-line input {
  227. width: 456rpx;
  228. height: 60rpx;
  229. line-height: 60rpx;
  230. background: #f5f5f5;
  231. border-radius: 12rpx;
  232. font-size: 24rpx;
  233. font-family: PingFang SC, PingFang SC-Medium;
  234. font-weight: 500;
  235. text-align: left;
  236. color: #939393;
  237. padding: 0 20rpx;
  238. }
  239. .item-line textarea{
  240. background: #F5F5F5;
  241. border-radius: 10rpx;
  242. padding: 20rpx;
  243. height: 150rpx;
  244. }
  245. .upload {
  246. display: flex;
  247. align-items: center;
  248. justify-content: center;
  249. width: 200rpx;
  250. height: 200rpx;
  251. background: rgba(245, 245, 245, 0.82);
  252. border: 2rpx dashed #99dcd0;
  253. border-radius: 16rpx;
  254. margin: 10rpx 12rpx;
  255. }
  256. .upload-img {
  257. width: calc(100% - 4rpx);
  258. height: calc(100% - 4rpx);
  259. border: 2rpx dashed #ccc;
  260. margin: 2rpx;
  261. }
  262. .button-submit {
  263. display: flex;
  264. align-items: center;
  265. justify-content: center;
  266. width: 596rpx;
  267. height: 90rpx;
  268. background: #F7AEB6;
  269. border-radius: 46rpx;
  270. margin: 20rpx auto;
  271. font-size: 28rpx;
  272. font-family: PingFang SC, PingFang SC-Regular;
  273. font-weight: 400;
  274. text-align: center;
  275. color: #ffffff;
  276. }
  277. </style>