kuaishoubind.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849
  1. <template>
  2. <view style="position: relative;">
  3. <!-- 胶囊 -->
  4. <mvBar :mysNavConfig="mysNavConfig"></mvBar>
  5. <view :style="{marginTop:navH}"></view>
  6. <view class="home">
  7. <view class="card" v-if="!loading">
  8. <view class="head">
  9. <image
  10. src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/lQLPDhrXwll1_NcjI7AD0T3viYtxQwGOvh1SwG0A_35_35.png"
  11. mode="aspectFill">
  12. </image>
  13. <span>快手账号绑定</span>
  14. </view>
  15. <view class="body">
  16. <view>
  17. <!-- 绑定成功展示信息 v-if -->
  18. <view v-if="isBindKuaishou">
  19. <!-- 左侧图片和文字 -->
  20. <view class="task-info-left" style="display: flex;">
  21. <!-- 图片 -->
  22. <image class="head-img" :src="head_uri"></image>
  23. <view class="task-info-txt">
  24. <p style="margin-bottom: 15rpx;">{{nick_name}}</p>
  25. <!-- <p style="color: #81838f;">剩余100天</p> -->
  26. </view>
  27. </view>
  28. <view class="sale_txt">
  29. <p>粉丝数:<span>{{fansCount}}</span></p>
  30. <p>近30日橱窗销量:<span style="padding-left: 30rpx;">{{saleNum_30}}</span></p>
  31. </view>
  32. </view>
  33. <!-- 分割线 -->
  34. <view class="heng-line"></view>
  35. <!-- 点击弹窗 toggle(触发)-->
  36. <button class="btn1" @click="getqrcode('center')">
  37. {{ isBindKuaishou ? '刷新授权' : '添加快手账号' }}
  38. </button>
  39. </view>
  40. </view>
  41. </view>
  42. </view>
  43. <!-- 普通弹窗 公众号-->
  44. <uni-popup ref="popup4" class="share" background-color="#fff" @change="change" :maskClick="true">
  45. <view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
  46. <view class="sharepage">
  47. <view class="projecttext1">
  48. <span>快手账号登录</span>
  49. </view>
  50. <view class="sharetxt">
  51. <text style="color:#9a9a9a ;">
  52. 截屏或下载二维码,使用快手APP\n
  53. 打开[首页-搜索-扫一扫]后扫码进行
  54. </text>
  55. </view>
  56. <!-- 授权码展示 -->
  57. <view class="sharemap">
  58. <!-- 根据 countdownTime 的值为 image 元素应用不同的类名 -->
  59. <image :class="{'expired-image': countdownTime <= 0, 'active-image': countdownTime > 0}"
  60. :src="qrcodeURL" mode=""></image>
  61. <!-- 条件渲染:当 countdownTime 小于等于 0 时显示蒙版 -->
  62. <image v-if="countdownTime <= 0"
  63. src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/qrOOD.png"
  64. style="width: 150rpx;height: 150rpx;position: absolute;top: 240rpx;left: 200rpx;"></image>
  65. </view>
  66. <view style="margin: 30rpx 0;">
  67. <button class="butmin1" size="mini" @tap="freshqrcode" :disabled="countdownTime > 0">
  68. {{ countdownTime > 0 ? `刷新二维码(${countdownTime}秒后到期)` : '刷新二维码 (已过期)' }}
  69. </button>
  70. </view>
  71. <view class="importentInfo1">
  72. <view class="sharetxt1" style="font-size: 22rpx;">
  73. <text style="white-space: pre-line; text-align: left;line-height: 1;">
  74. 登录成功后: \n
  75. ·同步账号基础信息及查看账号运营数据\n
  76. ·获得免费领样权限\n
  77. ·获得承接快手悬赏任务权限\n
  78. ·为达人橱窗快速选品\n
  79. ·为直播带货快速选品\n
  80. ·样叽专属高佣商品,同一商品,更高佣金\n
  81. ·变现种草任务参与资质\n
  82. </text>
  83. </view>
  84. </view>
  85. <view style="margin: 30rpx 0;">
  86. <button class="butmin" size="mini" @tap="saveImage">下载二维码至手机</button>
  87. </view>
  88. </view>
  89. </view>
  90. </uni-popup>
  91. </view>
  92. </template>
  93. <script>
  94. import mvBar from "@/components/mys_navBar/mysNavBar";
  95. import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue';
  96. import getPolicyEncode from '@/components/obs/getPolicy.js';
  97. import getSignature from '@/components/obs/GetSignature.js';
  98. import {
  99. saveImageToPhotosAlbum,
  100. showToast,
  101. downloadFile
  102. } from '@/uni_modules/sakura-canvas/js_sdk/util'
  103. export default {
  104. components: {
  105. mvBar,
  106. htzImageUpload,
  107. },
  108. data() {
  109. return {
  110. countdownTime: 100, // 初始倒计时时间(秒)
  111. intervalId: null, // 计时器 ID
  112. qrcodeURL: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/lQLPDhrXwll1_NcjI7AD0T3viYtxQwGOvh1SwG0A_35_35.png', // 用来保存二维码URL的变量
  113. // qrcodeURL: '',
  114. head_uri: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/lQLPDhrXwll1_NcjI7AD0T3viYtxQwGOvh1SwG0A_35_35.png',
  115. nick_name: "",
  116. navH: getApp().globalData.navHeight,
  117. hasClicked: false,
  118. loading: true,
  119. accountId: '',
  120. platform: {
  121. platform_id: '',
  122. platform_name: '',
  123. platform_icon: '',
  124. },
  125. isBind: true,
  126. isBindKuaishou: true,
  127. imageData: [],
  128. formData: {
  129. platform_nickname: '',
  130. fans_count: '',
  131. home_page_url: '',
  132. home_page_capture_url: ''
  133. },
  134. // 二维码地址
  135. imageUrl: '',
  136. index: 0,
  137. fansLabel: "选择单位",
  138. fansCount: null,
  139. saleNum_30: 0,
  140. fansCountInfo: 1,
  141. fansRange: [{
  142. value: 1,
  143. label: '个'
  144. },
  145. {
  146. value: 10000,
  147. label: '万'
  148. },
  149. {
  150. value: 100000000,
  151. label: '亿'
  152. }
  153. ],
  154. mysNavConfig: {
  155. /* 开启单页显示首页图标 */
  156. isHome: true,
  157. /* 固定导航 */
  158. navFixed: true,
  159. /* 标题 (屏幕中心居中 两边图标中心居中使用slot center1) */
  160. navTitle: {
  161. text: "社媒账号绑定",
  162. color: "",
  163. fontSize: "32rpx", // px upx rpx
  164. fontWeight: "normal", // 100 - 700
  165. },
  166. btnType: "type2",
  167. onLeftClick: '',
  168. /* type2 按钮 */
  169. type2Config: {
  170. // 左图标
  171. leftPath: "/static/img/png2.png",
  172. // 右图标
  173. rightPath: "/static/img/png4.png",
  174. // 圆角
  175. radius: "40rpx",
  176. },
  177. }, // 密码登录校验规则
  178. bindRules: {
  179. name: {
  180. rules: [{
  181. required: true,
  182. errorMessage: '请输入昵称'
  183. }]
  184. },
  185. home_img: {
  186. rules: [{
  187. required: true,
  188. errorMessage: '请上传主页截图',
  189. }]
  190. }
  191. },
  192. urlRegList: [
  193. /(.*)http(s?)\:\/\/((www\.)?)(xiaohongshu\.com)(.*)/,
  194. /(.*)http(s?)\:\/\/((www\.)?)((v\.)?)(douyin\.com)(.*)/,
  195. /(.*)http(s?)\:\/\/((www\.)?)((m\.)?)(weibo\.(com|cn))(.*)/,
  196. /(.*)http(s?)\:\/\/((www\.)?)((v|kpfshanghai)\.m\.chenzhongtech\.com)(.*)/,
  197. /(.*)http(s?)\:\/\/((www\.)?)(b23\.tv)(.*)/,
  198. /(.*)http(s?)\:\/\/((www\.)?)((m\.)?)(dianping\.(com|cn))(.*)/,
  199. /(.*)http(s?)\:\/\/((www\.)?)(zhihu\.com)(.*)/,
  200. ]
  201. }
  202. },
  203. onReady() {},
  204. async onShow() {},
  205. async onLoad(options) {
  206. await this.checkaccount()
  207. this.platform.platform_id = parseInt(options.platform_id)
  208. if (options.account_id) {
  209. this.accountId = parseInt(options.account_id)
  210. this.isBind = false
  211. }
  212. this.loading = true;
  213. uni.showLoading({
  214. title: '加载中'
  215. });
  216. await this.getinfo();
  217. if (!this.isBind) {
  218. // await this.getaccount()
  219. };
  220. this.loading = false;
  221. uni.hideLoading();
  222. },
  223. methods: {
  224. checkaccount() {
  225. this.$https.get('/youngee/c/t/g/check-account').then(res => {
  226. // this.$https.get('/youngee/c/t/g/check-ks-new-account').then(res => {
  227. // todo:得到用户数据并赋值 ,头像、粉丝,
  228. console.log("Backend response res:", res);
  229. // 如果后端响应了您想要的结果,则关闭 uni-popup,并停止向后端发送请求
  230. //如果/kuangshouauth执行完毕(存在含tid的数据)
  231. //data ==-1表示数据库中没有数据 -2表示token过期。
  232. if (res.data.code == 0) {
  233. this.nick_name = res.data.data.nick_name
  234. this.head_uri = res.data.data.head_uri
  235. this.fansCount = res.data.data.fan
  236. //继续往数据中填充30天销量字段
  237. this.$https.get('/youngee/c/t/g/query-sales-for30-days').then(res => {
  238. console.log("30days+++++++", res)
  239. this.saleNum_30 = res.data.data
  240. })
  241. this.isBindKuaishou = true
  242. //从数据库中取到accesstoken和
  243. } else {
  244. //没查到数据,或者token过期
  245. this.isBindKuaishou = false
  246. }
  247. }).catch(err => {
  248. console.error("Error:", err);
  249. });
  250. },
  251. // 获得二维码
  252. async getqrcode(type) {
  253. this.type4 = type;
  254. this.$refs.popup4.open(type);
  255. this.loading = true;
  256. uni.showLoading({
  257. title: '加载中',
  258. })
  259. // 从后端中请求二维码图片展示出来
  260. //达人id在后端通过session获取
  261. // await this.$https.get('/youngee/c/t/g/display-qrcode?platform_id=' + 4).then(res => {
  262. // console.log("ssss")
  263. // this.qrcodeURL = res.data.data;
  264. // })
  265. await this.$https.get('/youngee/c/t/g/get-ks-ecom-qrcode').then(res => {
  266. console.log("ssss")
  267. this.qrcodeURL = res.data.data;
  268. })
  269. this.startCountdown();
  270. this.loading = false;
  271. uni.hideLoading();
  272. },
  273. // 倒计时结束才能点击
  274. async freshqrcode() {
  275. this.qrcodeURL =
  276. 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/lQLPDhrXwll1_NcjI7AD0T3viYtxQwGOvh1SwG0A_35_35.png'
  277. if (this.intervalId != null) {
  278. clearInterval(this.intervalId);
  279. this.countdownTime = 100;
  280. }
  281. //重新设置倒计时时间
  282. this.countdownTime = 100; // 重置为 10 秒
  283. this.loading = true;
  284. uni.showLoading({
  285. title: '加载中',
  286. })
  287. await this.$https.get('/youngee/c/t/g/display-qrcode?platform_id=' + 4).then(res => {
  288. this.qrcodeURL = res.data.data;
  289. console.log("refresh--url:", this.qrcodeURL);
  290. })
  291. // 启动倒计时计时器
  292. this.startCountdown();
  293. this.loading = false;
  294. uni.hideLoading();
  295. },
  296. // startCountdown() {
  297. // // 每秒减少剩余时间
  298. // this.intervalId = setInterval(() => {
  299. // if (this.countdownTime > 0) {
  300. // this.countdownTime--;
  301. // this.$https.get('/youngee/c/t/g/check-account').then(res => {
  302. // // todo:得到用户数据并赋值
  303. // console.log("Backend response res:", res);
  304. // // 如果后端响应了您想要的结果,则关闭 uni-popup,并停止向后端发送请求
  305. // if (res.data.code != -1 && this.intervalId != null) {
  306. // clearInterval(this.intervalId);
  307. // this.countdownTime = 100;
  308. // this.closepop() // 关闭 uni-popup
  309. // }
  310. // }).catch(err => {
  311. // console.error("Error:", err);
  312. // });
  313. // }
  314. // }, 1000); // 每秒执行一次
  315. // },
  316. startCountdown() {
  317. // 每秒减少剩余时间
  318. this.intervalId = setInterval(() => {
  319. if (this.countdownTime > 0) {
  320. this.countdownTime--;
  321. this.$https.get('/youngee/c/t/g/check-ks-new-account').then(res => {
  322. // 如果后端响应了您想要的结果,则关闭 uni-popup,并停止向后端发送请求
  323. // 如果后端响应了您想要的结果,则关闭 uni-popup,并停止向后端发送请求
  324. if (res.data.code == -1 && this.intervalId != null) {
  325. console.log(res)
  326. clearInterval(this.intervalId);
  327. this.countdownTime = 100;
  328. this.closepop() // 关闭 uni-popup
  329. }
  330. if (res.data.code == 0 && this.intervalId != null) {
  331. clearInterval(this.intervalId);
  332. this.countdownTime = 100;
  333. this.closepop() // 关闭 uni-popup
  334. }
  335. }).catch(err => {
  336. console.error("Error:", err);
  337. });
  338. }
  339. }, 1000); // 每秒执行一次
  340. },
  341. // startCountdown() {
  342. // // 每秒减少剩余时间
  343. // this.intervalId = setInterval(() => {
  344. // if (this.countdownTime > 0) {
  345. // this.countdownTime--;
  346. // }
  347. // }, 1000); // 每秒执行一次
  348. // },
  349. //unipop出现/消失自动触发
  350. async change(e) {
  351. if (this.loading) {
  352. this.loading = false;
  353. uni.hideLoading();
  354. }
  355. if (this.intervalId != null) {
  356. clearInterval(this.intervalId);
  357. this.countdownTime = 100;
  358. }
  359. await this.checkaccount()
  360. this.qrcodeURL =
  361. 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/lQLPDhrXwll1_NcjI7AD0T3viYtxQwGOvh1SwG0A_35_35.png'
  362. },
  363. // 保存图片
  364. async saveImage() {
  365. console.log("进入保存方法");
  366. // 将base64数据部分提取出来
  367. const base64 = this.qrcodeURL.replace(/^data:image\/\w+;base64,/, "");
  368. // 将base64字符串转换为ArrayBuffer
  369. const buffer = wx.base64ToArrayBuffer(base64);
  370. // 使用文件系统管理器将ArrayBuffer写入文件
  371. wx.getFileSystemManager().writeFile({
  372. filePath: `${wx.env.USER_DATA_PATH}/qrcode.png`,
  373. data: buffer,
  374. encoding: 'binary',
  375. success: res => {
  376. // 文件写入成功后,保存图片到相册
  377. wx.saveImageToPhotosAlbum({
  378. filePath: `${wx.env.USER_DATA_PATH}/qrcode.png`,
  379. success: function(data) {
  380. wx.showToast({
  381. title: "保存成功",
  382. icon: "success",
  383. duration: 2000
  384. });
  385. },
  386. fail: function(err) {
  387. console.log(err);
  388. },
  389. complete: function(res) {
  390. console.log(res);
  391. }
  392. });
  393. },
  394. fail: err => {
  395. console.log(err);
  396. }
  397. });
  398. },
  399. // async saveImage() {
  400. // console.log("into save")
  401. // // showToast('保存成功')
  402. // wx.downloadFile({
  403. // url: this.qrcodeURL,
  404. // success: function(res) {
  405. // wx.saveImageToPhotosAlbum({
  406. // filePath: res.tempFilePath,
  407. // success: function(data) {
  408. // wx.showToast({
  409. // title: "保存成功",
  410. // icon: "success",
  411. // duration: 2000
  412. // })
  413. // },
  414. // fail: function(err) {
  415. // console.log(err);
  416. // },
  417. // complete(res) {
  418. // console.log(res);
  419. // }
  420. // })
  421. // }
  422. // })
  423. // },
  424. closepop() {
  425. this.$refs.popup4.close()
  426. },
  427. // 默认信息表,获取平台logo
  428. getinfo() {
  429. return this.$https.get('/youngee/c/g/get-info-tables')
  430. .then(res => {
  431. let list = res.data.data.ThirdPlatform
  432. for (var i = 0; i < list.length; ++i) {
  433. if (list[i].id == this.platform.platform_id) {
  434. this.platform.platform_icon = list[i].platform_icon
  435. this.platform.platform_name = list[i].platform_name
  436. }
  437. }
  438. })
  439. },
  440. // getaccount() {
  441. // return this.$https.get('/youngee/c/t/g/get-talent-account')
  442. // .then(res => {
  443. // console.log(res)
  444. // if (res.data.code !== -3) {
  445. // this.account = res.data.data
  446. // this.imageData = []
  447. // for (var i = 0; i < this.account.length; i++) {
  448. // if (this.platform.platform_id == this.account[i].platform_id) {
  449. // this.hasClicked = true
  450. // this.formData.platform_nickname = this.account[i].platform_nickname
  451. // this.formData.fans_count = this.account[i].fans_count
  452. // this.formData.home_page_url = this.account[i].home_page_url
  453. // this.imageData.push(this.account[i].home_page_capture_url);
  454. // if (this.formData.fans_count >= 100000000) {
  455. // this.index = 2
  456. // this.fansCountInfo = this.fansRange[this.index].value;
  457. // this.fansLabel = this.fansRange[this.index].label;
  458. // this.fansCount = (this.formData.fans_count / 100000000).toFixed(1)
  459. // } else if (this.formData.fans_count >= 10000) {
  460. // this.index = 1
  461. // this.fansCountInfo = this.fansRange[this.index].value;
  462. // this.fansLabel = this.fansRange[this.index].label;
  463. // this.fansCount = (this.formData.fans_count / 10000).toFixed(1)
  464. // } else {
  465. // this.index = 0
  466. // this.fansCountInfo = this.fansRange[this.index].value;
  467. // this.fansLabel = this.fansRange[this.index].label;
  468. // this.fansCount = this.formData.fans_count
  469. // }
  470. // }
  471. // }
  472. // }
  473. // })
  474. // },
  475. exit() {
  476. uni.navigateBack()
  477. },
  478. // 粉丝量量级选择
  479. bindPickerChange: function(e) {
  480. if (this.index !== e.detail.value) {
  481. this.fansCount = null
  482. }
  483. this.index = e.detail.value;
  484. this.fansLabel = this.fansRange[this.index].label
  485. this.fansCountInfo = this.fansRange[this.index].value
  486. },
  487. ceshiChooseSuccess(tempFilePaths, e) { //选择图片返回
  488. console.log('ceshiChooseSuccess', tempFilePaths, e);
  489. if (e == 0) {
  490. this.store = 'talent_upload/' + this.guid() + '.png'
  491. // this.store = 'talent_upload/icon-whole-pipline.png'
  492. // this.store = 'youngee/talent_upload/icon-edit.2png'
  493. } else if (e == 1) {
  494. this.store = 'talent_upload/' + this.guid() + '.mp4'
  495. }
  496. /****************
  497. 以下代码是自定义上传逻辑,仅供参考
  498. ***************/
  499. this.imgUpload(tempFilePaths);
  500. /*******************************/
  501. },
  502. imgUpload(tempFilePaths) {
  503. let that = this
  504. let config = {
  505. AccessKeyId: 'IVW21DTGIIUBBAGXKK0Y', //AK
  506. SecretKey: 'Y01nEQNcLOATMw7uJwrk3yOdQZ2fqLhSnXcOKVDE', //SK
  507. EndPoint: 'https://horastar.obs.cn-east-3.myhuaweicloud.com', //上传文件的路径
  508. };
  509. let fileName = this.store; //指定上传到OBS桶中的对象名
  510. let OBSPolicy = { //设定policy内容
  511. "expiration": "2089-12-31T12:00:00.000Z",
  512. "conditions": [{
  513. "bucket": "horastar"
  514. }, //Bucket name
  515. // {"bucket": "goin"},
  516. {
  517. 'key': fileName
  518. }
  519. ]
  520. }
  521. let policyEncoded = getPolicyEncode(OBSPolicy); //计算policy编码值
  522. let signature = getSignature(policyEncoded, config.SecretKey); //计算signature
  523. uni.uploadFile({
  524. //url: config.EndPoint,
  525. url: config.EndPoint,
  526. filePath: tempFilePaths[0],
  527. name: 'file',
  528. formData: {
  529. 'AccessKeyID': config.AccessKeyId,
  530. 'policy': policyEncoded,
  531. 'signature': signature,
  532. 'key': fileName,
  533. },
  534. success: function(res) {
  535. console.log("res", res); //打印响应状态码
  536. if (res.statusCode == 204) {
  537. // that.imageData.push(config.EndPoint + '/' + fileName);
  538. let obs_url = config.EndPoint + '/' + fileName; //用你自己的 bucket 名替换星号
  539. that.imageData.push(obs_url)
  540. that.formData.home_page_capture_url = obs_url
  541. uni.showToast({
  542. title: '上传成功',
  543. icon: '成功'
  544. });
  545. } else {
  546. uni.showToast({
  547. title: '上传失败',
  548. icon: '失败'
  549. });
  550. }
  551. },
  552. fail: function(e) {
  553. console.log(e);
  554. uni.showToast({
  555. title: '上传失败',
  556. icon: '失败'
  557. });
  558. }
  559. })
  560. },
  561. guid() {
  562. return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
  563. var r = Math.random() * 16 | 0,
  564. v = c == 'x' ? r : (r & 0x3 | 0x8);
  565. return v.toString(16);
  566. });
  567. },
  568. onInput(e) {
  569. console.log(e)
  570. e = (e.match(/^\d*(\.?\d{0,1})/g)[0]) || null
  571. // //重新赋值给input
  572. if (e < 0 || e > 9999.9) {
  573. uni.showToast({
  574. title: '请输入[1,9999.9]区间内的数',
  575. icon: 'none'
  576. })
  577. console.log('请输入[1,9999.9]区间内的数')
  578. }
  579. this.$nextTick(() => {
  580. this.fansCount = (e > 0 && e <= 9999.9) ? e : null
  581. })
  582. },
  583. onInput1(e) {
  584. // 验证是否是纯数字
  585. const isNumber = /^\d*$/.test(e)
  586. // 过滤非数字
  587. e = e.replace(/\D/g, '')
  588. if (!isNumber || e < 0 || e > 9999) {
  589. uni.showToast({
  590. title: '请输入[0,9999]区间的整数',
  591. icon: 'none'
  592. })
  593. console.log('请输入[0,9999]区间的整数')
  594. }
  595. this.$nextTick(() => {
  596. this.fansCount = (e >= 0 && e <= 9999 && e.match(/^\d*/g)[0]) ? e : null
  597. })
  598. }
  599. },
  600. }
  601. </script>
  602. <style>
  603. /deep/ .share .uni-popup .uni-popup__wrapper {
  604. width: 70% !important;
  605. border-radius: 15rpx !important;
  606. }
  607. </style>
  608. <style lang="scss" scoped>
  609. .importentInfo1 {
  610. margin-left: 59rpx;
  611. background-color: #efefef;
  612. border-radius: 8px;
  613. height: 370rpx;
  614. width: 400rpx;
  615. }
  616. // 主体样式
  617. .card {
  618. padding: 24rpx;
  619. margin-top: 30rpx;
  620. border: 1rpx solid #F0D232;
  621. background-color: #ffffff;
  622. margin: 0 10rpx;
  623. }
  624. .head {
  625. padding-top: 5%;
  626. padding: 0 0 0 1%;
  627. height: 80rpx;
  628. margin-top: 2%;
  629. }
  630. .head span {
  631. color: #333333;
  632. font-size: 80%;
  633. font-weight: 550;
  634. text-indent: 2em;
  635. }
  636. .head image {
  637. vertical-align: middle;
  638. width: 50rpx;
  639. height: 50rpx;
  640. display: inline-block;
  641. padding-right: 14rpx;
  642. }
  643. .task-info-txt {
  644. margin-top: 10rpx;
  645. margin-left: 20rpx;
  646. }
  647. .head-img {
  648. width: 120rpx;
  649. height: 120rpx;
  650. border-radius: 100rpx;
  651. }
  652. .sale_txt {
  653. margin-top: 30rpx;
  654. }
  655. .sale_txt p {
  656. margin-bottom: 17rpx;
  657. color: #81838f;
  658. }
  659. .sale_txt span {
  660. padding-left: 160rpx;
  661. }
  662. .home-link {
  663. /deep/.uni-easyinput__content-input {
  664. background-color: #EBEBEB;
  665. border-radius: 15rpx;
  666. }
  667. }
  668. .heng-line {
  669. margin-top: 60rpx;
  670. margin-bottom: 50rpx;
  671. border-bottom: 1rpx solid #DCDCDC;
  672. }
  673. .signupbtn p {
  674. font-size: 30rpx;
  675. }
  676. .exit-btn {
  677. width: 200rpx;
  678. text-align: center;
  679. padding: 10rpx 30rpx;
  680. background-color: #C0C0C0;
  681. border: 0;
  682. border-radius: 10rpx;
  683. color: #FFFFFF;
  684. font-size: 30rpx;
  685. line-height: 180%;
  686. }
  687. .btn1 {
  688. margin: 30rpx;
  689. font-size: 35rpx;
  690. color: #000;
  691. background-color: #F0D232;
  692. border: none;
  693. border-radius: 0;
  694. }
  695. //弹窗
  696. .share {
  697. text-align: center;
  698. line-height: 10rpx;
  699. margin-top: 10rpx;
  700. }
  701. .sharepage {
  702. // width: 90%;
  703. margin: 0 auto;
  704. // position: relative;
  705. }
  706. /deep/ .share.uni-popup .uni-popup__wrapper {
  707. width: 70%;
  708. border-radius: 15rpx;
  709. }
  710. .projecttext1 {
  711. // padding-top: 5%;
  712. padding: 0 0 0 1%;
  713. margin: 5% 0;
  714. text-align: center;
  715. }
  716. .projecttext1 image {
  717. vertical-align: middle;
  718. width: 80rpx;
  719. height: 80rpx;
  720. display: inline-block;
  721. padding-right: 14rpx;
  722. }
  723. .sharemap {
  724. margin: 0 auto;
  725. text-align: center;
  726. // margin-top: 15%;
  727. // margin-bottom: 15%;
  728. }
  729. .expired-image {
  730. width: 300rpx;
  731. height: 300rpx;
  732. background-color: #000;
  733. opacity: 0.2;
  734. /* 例如,设置透明度为 0.5 */
  735. }
  736. /* 定义活跃图片的样式 */
  737. .active-image {
  738. width: 300rpx;
  739. height: 300rpx;
  740. /* 如果有特定样式,可以在这里定义 */
  741. }
  742. .sharemap image {
  743. width: 300rpx;
  744. height: 300rpx;
  745. }
  746. .sharetxt {
  747. height: 100rpx;
  748. display: flex;
  749. flex-direction: column;
  750. align-items: center;
  751. justify-content: center;
  752. }
  753. .sharetxt1 {
  754. padding: 10rpx;
  755. height: 345rpx;
  756. display: flex;
  757. flex-direction: column;
  758. align-items: center;
  759. justify-content: center;
  760. }
  761. .sharetxt text {
  762. font-size: 24rpx;
  763. text-align: left;
  764. line-height: 20rpx
  765. }
  766. .butmin {
  767. // height: 48rpx;
  768. width: 380rpx;
  769. height: 65rpx;
  770. background-color: #FCCF41;
  771. line-height: 60rpx;
  772. font-weight: bold;
  773. }
  774. .butmin1 {
  775. // height: 48rpx;
  776. width: 400rpx;
  777. background-color: #ffffff;
  778. border: #000000 10rpx;
  779. line-height: 48rpx;
  780. color: #FCCF41;
  781. font-weight: bold;
  782. font-size: 20rpx;
  783. }
  784. </style>