index.vue 36 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479
  1. <template>
  2. <view>
  3. <view style="color: #000000;">
  4. <tn-nav-bar backgroundColor="#ffffff" :bottomShadow="false">{{commission_alias}}</tn-nav-bar>
  5. <view :style="{height: tobheight+'px'}"></view>
  6. </view>
  7. <view style="width:100%;height: 100%;">
  8. <view class="commission-wrap" :class="{ blur: !hasAuth }">
  9. <!-- 用户资料 -->
  10. <view class="user-card">
  11. <view class="card-top u-flex u-row-between">
  12. <view class="u-flex">
  13. <view class="head-img-box">
  14. <image class="head-img" :src="userInfo.avatar?userInfo.avatar:'/static/images/head.jpg'"
  15. mode=""></image>
  16. </view>
  17. <view class="u-flex-col">
  18. <view class="user-name">{{ userInfo.nickname }}</view>
  19. <view class="user-info-box u-flex">
  20. <view class="tag-box u-flex">
  21. <!-- <image v-if="commissionLv.image" class="tag-img" :src="commissionLv.image" mode=""></image> -->
  22. <text class="tag-title">{{ commissionLv.name }}</text>
  23. <!-- <view v-show="showLv" class="u-iconfont uicon-arrow-right" style="color: #fff;font-size: 28rpx;"></view> -->
  24. </view>
  25. </view>
  26. </view>
  27. </view>
  28. <view class="u-flex-col">
  29. <view class="u-flex-col u-col-center">
  30. <button class="u-reset-button log-btn u-m-b-20" @tap="toTeam">明细</button>
  31. <button class="u-reset-button look-btn" @tap="showMoney = !showMoney">
  32. <!-- <view class="u-iconfont" :class="showMoney ? 'uicon-eye-fill' : 'uicon-eye-off'" style="color: #fff;font-size: 50rpx;"></view> -->
  33. <u-icon :name="showMoney ? 'eye-fill':'eye-off'" color="#fff" size="22"></u-icon>
  34. </button>
  35. </view>
  36. </view>
  37. </view>
  38. <!-- 收益 -->
  39. <view class="card-bottom u-flex">
  40. <view class="u-flex-1 ">
  41. <view class="item-title">累计收入</view>
  42. <view class="item-detail">{{showMoney? money_total || 0.00:'****'}}</view>
  43. </view>
  44. <view class="u-flex-1 u-col-center">
  45. <view class="item-title">待入账佣金</view>
  46. <view class="item-detail">{{showMoney? on_cashout_money || 0.00:'****'}}</view>
  47. </view>
  48. </view>
  49. </view>
  50. <!-- 滚动明细 -->
  51. <view class="commission-log">
  52. <scroll-view scroll-y="true" @scrolltolower="loadMore" class="scroll-box log-scroll">
  53. <view class="log-item-box u-flex u-row-between" v-for="item in commissionLog" :key="item.id"
  54. @tap="$u.toast(item.remark)">
  55. <view class="log-item-wrap">
  56. <view class="log-item u-flex u-ellipsis-1 u-col-center">
  57. <view class="u-flex u-col-center ">
  58. <!-- <image
  59. class="log-img"
  60. :src="item.oper_type !== 'user' ? logMap[item.oper_type] : item.oper ? item.oper.avatar : logMap['admin']"
  61. mode=""
  62. ></image> -->
  63. <image class="log-img" :src="appInfo.site_logo_path" mode=""></image>
  64. </view>
  65. <view class="log-text u-ellipsis-1">{{ item.remark }}</view>
  66. </view>
  67. </view>
  68. <text class="log-time">{{ item.createtime }}</text>
  69. </view>
  70. <!-- 更多 -->
  71. <!-- <view class="loadmore-wrap" v-if="commissionLog.length"><u-loadmore :status="loadStatus" icon-type="flower" color="#f6f6f6" /></view> -->
  72. </scroll-view>
  73. </view>
  74. <!-- 功能菜单 -->
  75. <view class="menu-box u-flex">
  76. <view class="menu-item u-flex-col u-col-center" v-for="(menu, index) in menuList"
  77. v-if="!menu.isAgentFrom" :key="index" @tap="jump(menu.path)">
  78. <image class="item-img" :src="menu.img" mode=""></image>
  79. <view class="item-title">{{ menu.title }}</view>
  80. </view>
  81. <!-- #ifdef H5 -->
  82. <view @click="createPoster" class="menu-item u-flex-col u-col-center">
  83. <image class="item-img" src="https://file.shopro.top/imgs/commission/commission_icon5.png"
  84. mode=""></image>
  85. <view class="item-title">分享海报</view>
  86. </view>
  87. <view @click="sharelink" class="menu-item u-flex-col u-col-center">
  88. <image class="item-img" src="https://file.shopro.top/imgs/commission/commission_icon7.png"
  89. mode=""></image>
  90. <view class="item-title">分享链接</view>
  91. </view>
  92. <!-- #endif -->
  93. </view>
  94. <!-- #ifdef H5 -->
  95. <!-- <view class="bill">
  96. <u-button @click="createPoster" color="#ffc107" type="primary" shape="circle" text="推广海报"></u-button>
  97. </view> -->
  98. <!-- #endif -->
  99. </view>
  100. <!-- 佣金中心权限验证 -->
  101. <u-popup class="auth-box" :mask="false" v-model="showAuthModal" mode="center" :mask-close-able="false"
  102. close-icon-pos="top-left" border-radius="20">
  103. <view class="notice-box">
  104. <view class="img-wrap">
  105. <image class="notice-img" :src="authNotice.img" mode=""></image>
  106. </view>
  107. <view class="notice-title">{{ authNotice.title }}</view>
  108. <view class="notice-detail">{{ authNotice.detail }}</view>
  109. <button class="u-reset-button notice-btn"
  110. @tap="onAuthBtn(authNotice.btnPath)">{{ authNotice.btnText }}</button>
  111. <button class="u-reset-button back-btn" @tap="$Router.back()" v-if="!authNotice.hideBtn">返回</button>
  112. <button class="u-reset-button back-btn" @tap="hasAuth = true" v-else>取消</button>
  113. </view>
  114. </u-popup>
  115. <!-- 成为分销商条件 -->
  116. <u-popup v-if="showTerm" class="into-agent-modal" :bgStyle="{
  117. background: 'none'
  118. }" v-model="showTerm" mode="center" :mask="false" :mask-close-able="false">
  119. <view class="condition-box u-flex u-row-center u-col-center">
  120. <!-- 金额人数 -->
  121. <view class="goods-condition u-flex u-row-between" v-if="showMoneyTerm">
  122. <view class="btn-box u-flex-col u-p-20 u-col-center">
  123. <button class="u-reset-button buy-btn u-m-b-10" @tap="$Router.back()">知道了</button>
  124. <view class="tips">* 满足指定消费金额即可成为分销商</view>
  125. </view>
  126. </view>
  127. </view>
  128. </u-popup>
  129. </view>
  130. <!-- <wike-loading-page :isLoading="isLoading"></wike-loading-page> -->
  131. <!-- <u-popup :show="showPoster" mode="bottom" :round="10" @close="close">
  132. <view class="poster">
  133. <wike-painter :board="posterObj" @success="posterSuccess" ref="painter"></wike-painter>
  134. <view class="footer-btn">
  135. <view class="" @click="showPoster = false">退出</view>
  136. <view class="save" @click="toSave">保存/分享</view>
  137. </view>
  138. </view>
  139. </u-popup> -->
  140. <u-popup :show="showPoster" mode="bottom" @close="showPoster = false">
  141. <!-- <view :style="{height: tobheight+'px'}"></view> -->
  142. <scroll-view scroll-y="true" :style="{maxHeight: posterheight +'px'}">
  143. <wike-painter :board="posterObj" @done="posterSuccess" ref="painter"></wike-painter>
  144. <view style="height: 78px;"></view>
  145. <view class="dygbhg">
  146. <view class="whole" @click="showPoster = false">取消</view>
  147. <view class="distinguish" @click="toSave">保存/分享</view>
  148. </view>
  149. </scroll-view>
  150. </u-popup>
  151. <wike-loading-page :isLoading="isLoading"></wike-loading-page>
  152. </view>
  153. </template>
  154. <script>
  155. import {
  156. mapMutations,
  157. mapActions,
  158. mapState,
  159. mapGetters
  160. } from 'vuex';
  161. export default {
  162. data() {
  163. return {
  164. isLoading: true,
  165. tobheight: 45,
  166. platform: this.$platform.get(),
  167. showAuthModal: true,
  168. empty: false,
  169. team: [{
  170. headimg: 'https://dev.iduomi.cc/attachment/headimg_2.jpg?time=1673514485',
  171. nickname: '多级火箭好',
  172. times: '2020/12/24'
  173. }, {
  174. headimg: 'https://dev.iduomi.cc/attachment/headimg_2.jpg?time=1673514485',
  175. nickname: '多级火箭好',
  176. times: '2020/12/24'
  177. }, {
  178. headimg: 'https://dev.iduomi.cc/attachment/headimg_2.jpg?time=1673514485',
  179. nickname: '多级火箭好',
  180. times: '2020/12/24'
  181. }],
  182. pages: 1,
  183. currentTab: 0,
  184. navbar: [{
  185. name: "下一级",
  186. type: 'shareuid'
  187. }, {
  188. name: "下下级",
  189. type: 'shareuid_grandpa'
  190. },
  191. // {
  192. // name: "下三级",
  193. // type:'shareuid_great_grandpa'
  194. // },
  195. ],
  196. showShare: false, //是否显示分享海报
  197. showMoney: true, //是否显示金额
  198. hasAuth: true, //是否有权限
  199. commissionLv: {
  200. name: '合伙人'
  201. },
  202. //合伙人等级
  203. commissionWallet: null, //合伙人钱包
  204. agentFrom: null, //是否显示我的资料
  205. showLv: true,
  206. commissionLog: [{
  207. id: 1,
  208. oper_type: 'gf',
  209. oper: 'https://file.shopro.top/imgs/commission/commission_icon1.png',
  210. remark: '恭喜您成为了合伙人',
  211. createtime: 1676428876
  212. }], //动态
  213. loadStatus: 'loadmore', //loadmore-加载前的状态,loading-加载中的状态,nomore-没有更多的状态
  214. currentPage: 1,
  215. lastPage: 1,
  216. logMap: {
  217. system: this.$IMG_URL + '/imgs/commission/commission_base_notice.png',
  218. admin: this.$IMG_URL + '/imgs/commission/commission_base_avatar.png'
  219. },
  220. showTerm: true, //条件弹窗
  221. showGoodsTerm: false, //商品条件
  222. showMoneyTerm: false, //金额条件
  223. goodsTermList: [],
  224. moneyTermNum: 0,
  225. authNotice: {},
  226. menuList: [
  227. //menu
  228. {
  229. img: 'https://file.shopro.top/imgs/commission/commission_icon1.png',
  230. title: '我的团队',
  231. path: '/pages/user/commission/team'
  232. },
  233. {
  234. img: 'https://file.shopro.top/imgs/commission/commission_icon2.png',
  235. title: '佣金明细',
  236. path: '/pages/user/commission/commission-log'
  237. },
  238. {
  239. img: 'https://file.shopro.top/imgs/commission/commission_icon4.png',
  240. title: '推广套餐',
  241. path: '/pages/user/commission/goods',
  242. },
  243. {
  244. img: 'https://file.shopro.top/imgs/commission/commission_icon3.png',
  245. title: '提现佣金',
  246. path: '/pages/user/commission/withdraw',
  247. },
  248. // {
  249. // img: 'https://file.shopro.top/imgs/commission/commission_icon6.png',
  250. // title: '排行榜',
  251. // path: '/pages/user/commission/rankings'
  252. // },
  253. {
  254. img: 'https://file.shopro.top/imgs/commission/commission_icon8.png',
  255. title: '提现记录',
  256. path: '/pages/user/commission/withdraw-log',
  257. },
  258. // {
  259. // img: 'https://file.shopro.top/imgs/commission/commission_icon5.png',
  260. // title: '分享海报',
  261. // path: '/pages/user/commission/withdraw',
  262. // },
  263. // {
  264. // img: 'https://file.shopro.top/imgs/commission/commission_icon7.png',
  265. // title: '分享记录',
  266. // path: '/pages/app/commission/share-log',
  267. // }
  268. ],
  269. money_total: '0.00',
  270. on_cashout_money: '0.00',
  271. showPoster: false,
  272. posterObj: {},
  273. posterfff: '您好,我是AI语言模型,可以帮助你做很多事情。例如:\n- 回答你的问题\n- 给你提供某些信息\n- 帮你搜索网页\n- 聊天和闲聊\n- 玩一些小游戏\n- 计算数学题\n- 翻译语言\n- 生成文本\n等等.....\n如果你有任何问题或需要帮助,请随时告诉我。',
  274. spmplatform: 0,
  275. is_examine: 1,
  276. commission_price: 0,
  277. info: {},
  278. posterheight: 0,
  279. poster_bg_img_path:'',
  280. commission_alias:''
  281. }
  282. },
  283. computed: {
  284. ...mapGetters(['appInfo', 'isLogin', 'userInfo'])
  285. },
  286. onLoad() {
  287. // this.getInviteList()
  288. const that = this;
  289. if (this.platform == 'wxMiniProgram') {
  290. var menumtop = uni.getMenuButtonBoundingClientRect().top - uni.getSystemInfoSync().statusBarHeight
  291. var paddingtop = uni.getSystemInfoSync().statusBarHeight + menumtop
  292. this.tobheight = (menumtop + paddingtop + uni.getMenuButtonBoundingClientRect().height)
  293. }
  294. this.posterheight = uni.$u.sys().windowHeight - this.tobheight
  295. this.spmplatform = ['H5', 'wxOfficialAccount', 'wxMiniProgram', 'App'].indexOf(this.platform) + 1;
  296. this.commonqrcodePath()
  297. // console.log('http://vmoushivideomerge.oss-cn-shanghai.aliyuncs.com/20230422/96f1f662dcfc68cb3eff1dcbf660ed92.jpg');
  298. // that.$base64.imageUrlToBase64('http://vmoushivideomerge.oss-cn-shanghai.aliyuncs.com/20230422/96f1f662dcfc68cb3eff1dcbf660ed92.jpg')
  299. },
  300. onShow() {
  301. this.islogin();
  302. },
  303. methods: {
  304. islogin() {
  305. var that = this;
  306. if (!this.isLogin) {
  307. uni.navigateTo({
  308. url: '../user/signin'
  309. });
  310. } else {
  311. this.commission()
  312. // this.getCheck()
  313. }
  314. },
  315. commission() {
  316. let that = this;
  317. that.$http('conf.getGroupConf', {
  318. group: 'system.commission'
  319. }).then(res => {
  320. if (res.code === 0) {
  321. that.info = res.data
  322. that.commission_alias = res.data.commission_alias?res.data.commission_alias:'分销中心'
  323. if (res.data.is_examine) {
  324. that.is_examine = res.data.is_examine
  325. // console.log(that.is_examine);
  326. }
  327. if (res.data.commission_price) {
  328. that.commission_price = res.data.commission_price
  329. }
  330. if (res.data.is_ranking == 1) {
  331. if (that.menuList.length == 5) {
  332. let obj = {
  333. img: 'https://file.shopro.top/imgs/commission/commission_icon6.png',
  334. title: '排行榜',
  335. path: '/pages/user/commission/rankings'
  336. };
  337. that.menuList.splice(2, 0, obj);
  338. }
  339. }
  340. that.getCheck()
  341. }
  342. });
  343. },
  344. commonqrcodePath() {
  345. let spm = this.userInfo.id + '.1.0.' + this.spmplatform + '.1';
  346. // console.log(spm);
  347. this.$http('common.qrcodePath', {
  348. spm: spm
  349. }).then(res => {
  350. if (res.code == 0) {
  351. this.qrcode = res.data;
  352. }
  353. });
  354. },
  355. sharelink() {
  356. let spm = this.userInfo.id + '.1.0.' + this.spmplatform + '.1';
  357. // #ifdef MP-WEIXIN
  358. let url = '/pages/index/index?' + 'spm=' + spm
  359. uni.setClipboardData({
  360. data: url,
  361. success: function() {
  362. uni.showToast({
  363. title: '复制链接成功'
  364. });
  365. }
  366. });
  367. // #endif
  368. // #ifdef H5
  369. let uniacid = uni.getStorageSync('uniacid');
  370. if (uniacid) {
  371. let url = window.location.href.split('/h5')[0] + '/h5/?uniacid=' + uniacid + '&spm=' + spm;
  372. uni.setClipboardData({
  373. data: url,
  374. success: function() {
  375. uni.showToast({
  376. title: '复制链接成功'
  377. });
  378. }
  379. });
  380. } else {
  381. uni.showToast({
  382. title: '复制链接失败',
  383. icon: 'none'
  384. })
  385. }
  386. // #endif
  387. },
  388. getdownload(e){
  389. return new Promise((resolve, reject) => {
  390. uni.request({
  391. url: e,
  392. method:'GET',
  393. responseType:'arraybuffer',
  394. success: ress => {
  395. let base64 = wx.arrayBufferToBase64(ress.data);
  396. base64 = 'data:image/jpeg;base64,' + base64
  397. resolve(base64);
  398. },
  399. fail: (e) => {
  400. resolve('fail');
  401. }
  402. })
  403. });
  404. },
  405. posterSuccess(){
  406. uni.hideLoading();
  407. },
  408. async createPoster(e) {
  409. let that = this;
  410. let httpsurl = '';
  411. uni.showLoading({
  412. title: '海报渲染中'
  413. });
  414. if(that.info.poster_bg_img_path.indexOf("https") < 0){
  415. httpsurl = await that.getdownload(that.info.poster_bg_img_path.replace("http:", "https:"));
  416. }else{
  417. httpsurl = await that.getdownload(that.info.poster_bg_img_path);
  418. }
  419. if(httpsurl == 'fail'){
  420. uni.hideLoading();
  421. uni.showToast({
  422. title:'生成失败',
  423. icon:'none'
  424. })
  425. return;
  426. }
  427. let proportionally = this.info.poster_bg_width / uni.$u.sys().windowWidth;
  428. // console.log(this.info.poster_bg_width,(this.info.poster_bg_width / proportionally));
  429. // console.log(this.info.poster_bg_height,(this.info.poster_bg_height / proportionally));
  430. // console.log(this.info.poster_qrcode_x,(this.info.poster_qrcode_x / proportionally));
  431. // console.log(this.info.poster_qrcode_y,(this.info.poster_qrcode_y / proportionally));
  432. // console.log(this.info.poster_qrcode_width,(this.info.poster_qrcode_width / proportionally));
  433. (this.posterObj = {
  434. width: (this.info.poster_bg_width / proportionally) + 'px',
  435. height: (this.info.poster_bg_height / proportionally) + 'px',
  436. background: '#fff',
  437. borderRadius: '16rpx',
  438. views: [{
  439. src: httpsurl,
  440. type: "image",
  441. css: {
  442. width: (this.info.poster_bg_width / proportionally) + 'px',
  443. height: (this.info.poster_bg_height / proportionally) + 'px',
  444. }
  445. },
  446. // {
  447. // src: this.userInfo.avatar ? this.userInfo.avatar : '/static/images/head.jpg',
  448. // type: "image",
  449. // css: {
  450. // width: '100rpx',
  451. // height: '100rpx',
  452. // borderRadius: '50%',
  453. // position:'fixed',
  454. // left: '286rpx',
  455. // top: '258rpx',
  456. // objectFit:'cover'
  457. // }
  458. // },
  459. {
  460. type: 'view',
  461. css: {
  462. left: (this.info.poster_qrcode_x / proportionally) + 'px',
  463. top: (this.info.poster_qrcode_y / proportionally) + 'px',
  464. position: 'fixed',
  465. },
  466. // #ifdef H5
  467. views: [{
  468. type: 'qrcode',
  469. text: this.qrcode,
  470. css: {
  471. width: (this.info.poster_qrcode_width / proportionally) + 'px',
  472. height: (this.info.poster_qrcode_width / proportionally) + 'px',
  473. background: '#fff'
  474. }
  475. }],
  476. // #endif
  477. // #ifdef MP-WEIXIN
  478. views: [{
  479. type: 'image',
  480. src: this.qrcode,
  481. css: {
  482. width: (this.info.poster_qrcode_width / proportionally) + 'px',
  483. height: (this.info.poster_qrcode_width / proportionally) + 'px',
  484. background: '#fff'
  485. }
  486. }]
  487. // #endif
  488. }
  489. ]
  490. // views: [
  491. // {
  492. // type: 'view',
  493. // css: {
  494. // marginTop: '20rpx',
  495. // paddingLeft: '10rpx',
  496. // display: 'flex'
  497. // },
  498. // views: [
  499. // {
  500. // type: 'image',
  501. // src: this.userInfo.avatar ? this.userInfo.avatar : '/static/images/head.jpg',
  502. // css: {
  503. // marginTop: '10rpx',
  504. // marginLeft: '10rpx',
  505. // borderRadius: '16rpx',
  506. // width: '80rpx',
  507. // height: '80rpx',
  508. // border: '2rpx solid #fff',
  509. // objectFit: 'cover'
  510. // }
  511. // },
  512. // {
  513. // type: 'view',
  514. // css: {
  515. // marginTop: '10rpx',
  516. // marginLeft: '20rpx'
  517. // },
  518. // views: [
  519. // {
  520. // type: 'view',
  521. // views: [
  522. // {
  523. // type: 'text',
  524. // text: this.userInfo.nickname?this.userInfo.nickname:'提问者',
  525. // css: {
  526. // marginTop: '10rpx',
  527. // fontSize: '28rpx',
  528. // fontWeight: 'bold',
  529. // color: '#1A2033',
  530. // lineHeight: '28rpx'
  531. // }
  532. // }
  533. // ]
  534. // },
  535. // {
  536. // type: 'view',
  537. // views: [
  538. // {
  539. // type: 'text',
  540. // text: '我的提问',
  541. // css: {
  542. // marginTop: '15rpx',
  543. // fontSize: '22rpx',
  544. // color: '#999',
  545. // lineHeight: '25rpx'
  546. // }
  547. // }
  548. // ]
  549. // }
  550. // ]
  551. // }
  552. // ]
  553. // },
  554. // {
  555. // type: 'view',
  556. // css: {
  557. // marginTop: '20rpx',
  558. // width: '610rpx',
  559. // padding: '10rpx',
  560. // background: '#d2f8d3',
  561. // borderRadius: '16rpx',
  562. // marginLeft: '20rpx',
  563. // marginRight: '10rpx'
  564. // },
  565. // views: [
  566. // {
  567. // type: 'text',
  568. // text: 'hello!你可以帮我做些什么呢?',
  569. // css: {
  570. // fontSize: '28rpx',
  571. // color: '#1A2033',
  572. // lineHeight: '45rpx',
  573. // lineClamp: 2,
  574. // paddingLeft: '10rpx',
  575. // paddingRight: '10rpx',
  576. // width: '590rpx'
  577. // }
  578. // }
  579. // ]
  580. // },
  581. // {
  582. // type: 'view',
  583. // css: {
  584. // marginTop: '20rpx',
  585. // paddingLeft: '10rpx',
  586. // display: 'flex'
  587. // },
  588. // views: [
  589. // {
  590. // type: 'image',
  591. // src: this.appInfo.page_template == 3?'/static/images/open1.png':'/static/images/open.png',
  592. // css: {
  593. // marginTop: '10rpx',
  594. // marginLeft: '10rpx',
  595. // borderRadius: '16rpx',
  596. // width: '80rpx',
  597. // height: '80rpx',
  598. // border: '2rpx solid #fff',
  599. // objectFit: 'cover'
  600. // }
  601. // },
  602. // {
  603. // type: 'view',
  604. // css: {
  605. // marginTop: '10rpx',
  606. // marginLeft: '20rpx'
  607. // },
  608. // views: [
  609. // {
  610. // type: 'view',
  611. // views: [
  612. // {
  613. // type: 'text',
  614. // text: this.appInfo.site_name,
  615. // css: {
  616. // marginTop: '10rpx',
  617. // fontSize: '28rpx',
  618. // fontWeight: 'bold',
  619. // color: '#1A2033',
  620. // lineHeight: '28rpx'
  621. // }
  622. // }
  623. // ]
  624. // },
  625. // {
  626. // type: 'view',
  627. // views: [
  628. // {
  629. // type: 'text',
  630. // text: '回答结果',
  631. // css: {
  632. // marginTop: '15rpx',
  633. // fontSize: '22rpx',
  634. // color: '#999',
  635. // lineHeight: '25rpx'
  636. // }
  637. // }
  638. // ]
  639. // }
  640. // ]
  641. // }
  642. // ]
  643. // },
  644. // {
  645. // type: 'view',
  646. // css: {
  647. // marginTop: '20rpx',
  648. // width: '610rpx',
  649. // padding: '10rpx',
  650. // background: '#f5f6f8',
  651. // borderRadius: '16rpx',
  652. // marginLeft: '20rpx',
  653. // marginRight: '10rpx'
  654. // },
  655. // views: [
  656. // {
  657. // type: 'text',
  658. // text: uni.$u.trim(that.posterfff),
  659. // css: {
  660. // fontSize: '28rpx',
  661. // color: '#1A2033',
  662. // lineHeight: '45rpx',
  663. // lineClamp: 11,
  664. // width: '590rpx',
  665. // padding: '10rpx'
  666. // }
  667. // }
  668. // ]
  669. // },
  670. // {
  671. // type: 'view',
  672. // css: {
  673. // marginTop: '20rpx',
  674. // width: '100%',
  675. // textAlign: 'center'
  676. // },
  677. // #ifdef H5
  678. // views: [
  679. // {
  680. // type: 'qrcode',
  681. // text: this.qrcode,
  682. // css: {
  683. // width: '200rpx',
  684. // height: '200rpx'
  685. // }
  686. // }
  687. // ],
  688. // #endif
  689. // #ifdef MP-WEIXIN
  690. // views: [
  691. // {
  692. // type: 'image',
  693. // src: this.qrcode,
  694. // css: {
  695. // width: '200rpx',
  696. // height: '200rpx'
  697. // }
  698. // }
  699. // ]
  700. // #endif
  701. // },
  702. // {
  703. // type: 'text',
  704. // text: '———— ' + '长按识别 | 欢迎使用' + ' ————',
  705. // css: {
  706. // marginTop: '20rpx',
  707. // width: '100%',
  708. // textAlign: 'center',
  709. // fontSize: '24rpx',
  710. // color: '#989FB3',
  711. // lineHeight: '33rpx'
  712. // }
  713. // }
  714. // ]
  715. }),
  716. (this.showPoster = true);
  717. },
  718. toSave() {
  719. uni.showLoading({
  720. title: '海报生成中'
  721. });
  722. this.$refs.painter.canvasToTempFilePathSync({
  723. // 在nvue里是jpeg
  724. fileType: 'jpg',
  725. quality: 1,
  726. success: res => {
  727. // this.path = res.tempFilePath;
  728. // this.$refs.posterImg.open();
  729. // this.show_poster = true;
  730. // console.log(res.tempFilePath);
  731. // 非H5 保存到相册
  732. // H5 提示用户长按图另存
  733. // #ifdef MP-WEIXIN
  734. // uni.saveImageToPhotosAlbum({
  735. // filePath: res.tempFilePath,
  736. // success: function() {
  737. // uni.showToast({
  738. // title: '保存成功'
  739. // });
  740. // that.showPoster = false;
  741. // }
  742. // });
  743. wx.showShareImageMenu({
  744. path: res.tempFilePath
  745. })
  746. this.showPoster = false;
  747. uni.hideLoading();
  748. // #endif
  749. // #ifdef H5
  750. this.showPoster = false;
  751. uni.hideLoading();
  752. uni.showModal({
  753. confirmColor: '#26B3A0',
  754. confirmText: '查看图片',
  755. title: '提示',
  756. content: '查看图片后长按图片即可保存或分享',
  757. success(src) {
  758. if (src.confirm) {
  759. uni.previewImage({
  760. urls: [res.tempFilePath]
  761. });
  762. } else if (src.cancel) {
  763. this.showPoster = true;
  764. }
  765. }
  766. });
  767. // #endif
  768. }
  769. });
  770. },
  771. getCheck() {
  772. var that = this;
  773. that.$http('commission.auth').then(res => {
  774. if (res.code == 0) {
  775. this.isLoading = false
  776. uni.setNavigationBarTitle({
  777. title: this.appInfo.site_name
  778. });
  779. that.money_total = res.data.money_total > 0 ? res.data.money_total : '0.00'
  780. that.on_cashout_money = res.data.on_cashout_money > 0 ? res.data.on_cashout_money : '0.00'
  781. that.commissionLog[0].createtime = res.data.create_time
  782. // console.log(res.data.paid,this.commission_price);
  783. // console.log(Number(this.commission_price));
  784. // if(Number(this.commission_price)>0&&res.data.paid == 0){
  785. // uni.redirectTo({
  786. // url:'/pages/user/commission/apply'
  787. // })
  788. // }
  789. // console.log(res.data.status,that.is_examine);
  790. if (res.data.status == 0 && that.is_examine == 1) {
  791. uni.showModal({
  792. confirmText: '确定',
  793. showCancel: false,
  794. confirmColor: '#5e49c3',
  795. content: '分销商申请已提交,等待后台审核通过',
  796. title: '提示',
  797. success(res) {
  798. if (res.confirm) {
  799. uni.navigateBack()
  800. }
  801. }
  802. })
  803. }
  804. if (res.data.status == 2) {
  805. uni.showModal({
  806. confirmText: '联系客服',
  807. confirmColor: '#5e49c3',
  808. content: '已被禁用,有疑问请咨询客服',
  809. title: '提示',
  810. success(res) {
  811. if (res.confirm) {
  812. uni.navigateTo({
  813. url: '/pages/user/public/kefu'
  814. })
  815. } else if (res.cancel) {
  816. uni.navigateBack()
  817. }
  818. }
  819. })
  820. }
  821. } else {
  822. // uni.showModal({
  823. // confirmText:'申请',
  824. // confirmColor:'#5e49c3',
  825. // content:'立即申请成为合伙人',
  826. // title:'提示',
  827. // success(res) {
  828. // if(res.confirm){
  829. // that.commissionapply()
  830. // }else if(res.cancel){
  831. // uni.navigateBack()
  832. // }
  833. // }
  834. // })
  835. uni.redirectTo({
  836. url: '/pages/user/commission/apply'
  837. })
  838. }
  839. });
  840. },
  841. commissionapply() {
  842. var that = this;
  843. that.$http('commission.apply').then(res => {
  844. if (res.code == 0) {
  845. uni.showToast({
  846. title: '申请成功'
  847. })
  848. that.getCheck()
  849. } else {
  850. uni.showModal({
  851. confirmText: '重新申请',
  852. confirmColor: '#5e49c3',
  853. content: '合伙人申请失败',
  854. title: '提示',
  855. success(res) {
  856. if (res.confirm) {
  857. that.commissionapply()
  858. } else if (res.cancel) {
  859. uni.navigateBack()
  860. }
  861. }
  862. })
  863. }
  864. });
  865. },
  866. // 我的团队
  867. getInviteList() {
  868. var that = this;
  869. that.$api('distribution.ulist', {
  870. uid: this.userInfo.id,
  871. type: this.navbar[this.currentTab].type
  872. }).then(res => {
  873. // console.log(res)
  874. if (res.data.length > 0) {
  875. if (that.team.length > 0) {
  876. var dd = this.team;
  877. this.team = dd.concat(res.data);
  878. this.pages++;
  879. } else {
  880. this.team = res.data;
  881. this.pages++;
  882. }
  883. } else {
  884. // this.empty = true
  885. }
  886. });
  887. },
  888. jump(e) {
  889. uni.navigateTo({
  890. url: e
  891. })
  892. },
  893. change(index) {
  894. this.currentTab = index;
  895. this.team = [];
  896. this.pages = 1;
  897. this.getInviteList()
  898. },
  899. toTeam() {
  900. // uni.navigateTo({
  901. // url:'/pages/user/commission/team'
  902. // })
  903. uni.navigateTo({
  904. url: '/pages/user/commission/commission-log'
  905. })
  906. }
  907. },
  908. onPullDownRefresh() {
  909. var that = this;
  910. // setTimeout(function() {
  911. // this.pages = 1;
  912. // this.team = [];
  913. // that.getInviteList();
  914. // uni.stopPullDownRefresh();
  915. // }, 1000);
  916. },
  917. onReachBottom() {
  918. // this.getInviteList();
  919. },
  920. }
  921. </script>
  922. <style lang="scss" scoped>
  923. .commission-wrap {
  924. background: url('http://file.shopro.top/imgs/commission/commission_bg1.jpg') no-repeat;
  925. background-size: cover;
  926. height: 100%;
  927. width: 100%;
  928. position: absolute;
  929. background-position: 50%;
  930. transition: all 0.3s ease-in-out 0s;
  931. overflow: hidden;
  932. }
  933. // 进度条
  934. .progress-box {
  935. .progress-tip {
  936. font-size: 24rpx;
  937. font-weight: 500;
  938. color: #c7b2ff;
  939. }
  940. .progress-num {
  941. font-size: 24rpx;
  942. position: absolute;
  943. color: #c7b2ff;
  944. bottom: -30rpx;
  945. white-space: nowrap;
  946. }
  947. .round-wrap {
  948. width: 30rpx;
  949. height: 30rpx;
  950. border: 2rpx solid #5c3cff;
  951. background: linear-gradient(0deg, #a36fff 0%, #846fff 100%);
  952. border-radius: 50%;
  953. position: absolute;
  954. bottom: -6rpx;
  955. transform: translateY(-50%);
  956. left: 0;
  957. margin-left: -15rpx;
  958. .round-inner {
  959. width: 20rpx;
  960. height: 20rpx;
  961. border: 2rpx solid #5c3cff;
  962. background: linear-gradient(0deg, #a36fff 0%, #846fff 100%);
  963. border-radius: 50%;
  964. position: absolute;
  965. top: 50%;
  966. left: 50%;
  967. transform: translate(-50%, -50%);
  968. }
  969. }
  970. }
  971. // 佣金中心权限验证蒙层
  972. .blur {
  973. filter: blur(20rpx);
  974. transition: all 0.3s ease-in-out 0s;
  975. }
  976. .auth-box {
  977. width: 100%;
  978. height: 100%;
  979. background: none;
  980. .notice-box {
  981. display: flex;
  982. flex-direction: column;
  983. justify-content: center;
  984. align-items: center;
  985. background-color: #fff;
  986. width: 612rpx;
  987. min-height: 658rpx;
  988. background: #ffffff;
  989. padding: 30rpx;
  990. border-radius: 20rpx;
  991. .img-wrap {
  992. margin-bottom: 50rpx;
  993. .notice-img {
  994. width: 180rpx;
  995. height: 170rpx;
  996. }
  997. }
  998. .notice-title {
  999. font-size: 35rpx;
  1000. font-weight: bold;
  1001. color: #46351b;
  1002. margin-bottom: 28rpx;
  1003. }
  1004. .notice-detail {
  1005. font-size: 28rpx;
  1006. font-weight: 400;
  1007. color: #999999;
  1008. line-height: 36rpx;
  1009. margin-bottom: 50rpx;
  1010. }
  1011. .notice-btn {
  1012. width: 492rpx;
  1013. line-height: 70rpx;
  1014. background: linear-gradient(-90deg, #a36fff, #5336ff);
  1015. box-shadow: 0px 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34);
  1016. border-radius: 35rpx;
  1017. font-size: 28rpx;
  1018. font-weight: 500;
  1019. color: #ffffff;
  1020. margin-bottom: 10rpx;
  1021. }
  1022. .back-btn {
  1023. width: 492rpx;
  1024. line-height: 70rpx;
  1025. font-size: 28rpx;
  1026. font-weight: 500;
  1027. color: #c5b8fb;
  1028. background: none;
  1029. }
  1030. }
  1031. }
  1032. // 成为分销商
  1033. .into-agent-modal {
  1034. .condition-box {
  1035. width: 640rpx;
  1036. height: 786rpx;
  1037. background: url('http://file.shopro.top/imgs/commission/into_commission.png') no-repeat;
  1038. background-size: 100% 100%;
  1039. }
  1040. .goods-condition {
  1041. width: 484rpx;
  1042. height: 580rpx;
  1043. padding: 80rpx 0 30rpx;
  1044. display: flex;
  1045. flex-direction: column;
  1046. justify-content: center;
  1047. align-items: center;
  1048. position: relative;
  1049. .card-wrap {
  1050. width: 484rpx;
  1051. height: 460rpx;
  1052. padding: 10rpx;
  1053. padding-bottom: 30rpx;
  1054. }
  1055. .modal-progress {
  1056. .progress-tip {
  1057. font-size: 24rpx;
  1058. }
  1059. .progress-box {
  1060. margin-right: 10rpx;
  1061. .cu-progress {
  1062. width: 200rpx;
  1063. position: relative;
  1064. .round-wrap {
  1065. width: 20rpx;
  1066. height: 20rpx;
  1067. }
  1068. .round-inner {
  1069. width: 10rpx;
  1070. height: 10rpx;
  1071. }
  1072. }
  1073. }
  1074. }
  1075. .card-box {
  1076. background: rgba(#c3b6ff, 0.3);
  1077. padding: 10rpx;
  1078. border-radius: 10rpx;
  1079. .img-wrap {
  1080. background: #fff;
  1081. width: 110rpx;
  1082. height: 110rpx;
  1083. border-radius: 10rpx;
  1084. margin-right: 20rpx;
  1085. .goods-img {
  1086. width: 110rpx;
  1087. height: 110rpx;
  1088. border-radius: 10rpx;
  1089. }
  1090. }
  1091. .detail {
  1092. height: 110rpx;
  1093. width: 280rpx;
  1094. align-items: flex-start;
  1095. .title {
  1096. font-size: 20rpx;
  1097. font-weight: 500;
  1098. color: #333333;
  1099. line-height: 35rpx;
  1100. text-align: left;
  1101. }
  1102. .sub {
  1103. font-size: 16rpx;
  1104. font-weight: 500;
  1105. color: #9281e2;
  1106. text-align: left;
  1107. width: 280rpx;
  1108. }
  1109. }
  1110. }
  1111. .filter-card {
  1112. filter: grayscale(100%);
  1113. filter: gray;
  1114. }
  1115. .btn-box {
  1116. background-color: #fff;
  1117. width: 100%;
  1118. position: absolute;
  1119. bottom: 0;
  1120. .buy-btn {
  1121. width: 390rpx;
  1122. line-height: 60rpx;
  1123. background: linear-gradient(-90deg, #a36fff, #5336ff);
  1124. box-shadow: 0px 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34);
  1125. border-radius: 35rpx;
  1126. font-size: 24rpx;
  1127. font-weight: 500;
  1128. color: #ffffff;
  1129. }
  1130. .tips {
  1131. font-size: 20rpx;
  1132. font-weight: 500;
  1133. color: #9281e2;
  1134. }
  1135. }
  1136. }
  1137. }
  1138. // 用户资料卡片
  1139. .user-card {
  1140. width: 690rpx;
  1141. min-height: 350rpx;
  1142. border-radius: 14rpx;
  1143. margin: 30rpx;
  1144. background: url('http://file.shopro.top/imgs/commission/commission_card_bg.png') no-repeat;
  1145. background-size: 100% 100%;
  1146. padding-top: 10rpx;
  1147. .card-top {
  1148. padding: 40rpx 40rpx 30rpx;
  1149. margin-bottom: 30rpx;
  1150. border-bottom: 1px solid rgba(#fff, 0.12);
  1151. .user-name {
  1152. font-size: 26rpx;
  1153. font-weight: 500;
  1154. color: #ffffff;
  1155. line-height: 30rpx;
  1156. margin-bottom: 20rpx;
  1157. }
  1158. .log-btn {
  1159. width: 86rpx;
  1160. line-height: 41rpx;
  1161. border: 1rpx solid rgba(#ffffff, 0.33);
  1162. border-radius: 32rpx;
  1163. font-size: 22rpx;
  1164. font-weight: 400;
  1165. color: #ffffff;
  1166. }
  1167. .look-btn {
  1168. color: #fff;
  1169. font-size: 40rpx;
  1170. }
  1171. }
  1172. .head-img-box {
  1173. margin-right: 26rpx;
  1174. width: 76rpx;
  1175. height: 76rpx;
  1176. border-radius: 50px;
  1177. position: relative;
  1178. background: #fff;
  1179. padding: 10rpx;
  1180. background-clip: padding-box;
  1181. .head-img {
  1182. width: 66rpx;
  1183. height: 66rpx;
  1184. border-radius: 50%;
  1185. position: absolute;
  1186. top: 50%;
  1187. left: 50%;
  1188. transform: translate(-50%, -50%);
  1189. }
  1190. }
  1191. .user-info-box {
  1192. .tag-box {
  1193. background: rgba(0, 0, 0, 0.2);
  1194. border-radius: 21rpx;
  1195. line-height: 38rpx;
  1196. .tag-img {
  1197. width: 36rpx;
  1198. height: 36rpx;
  1199. border-radius: 50%;
  1200. }
  1201. .tag-title {
  1202. font-size: 20rpx;
  1203. padding: 0 10rpx;
  1204. font-weight: 500;
  1205. color: rgba(255, 255, 255, 1);
  1206. line-height: 36rpx;
  1207. }
  1208. }
  1209. }
  1210. .card-bottom {
  1211. margin: 0 40rpx 40rpx;
  1212. .item-title {
  1213. font-size: 24rpx;
  1214. font-weight: 400;
  1215. color: #ffffff;
  1216. line-height: 30rpx;
  1217. }
  1218. .item-detail {
  1219. font-size: 40rpx;
  1220. font-family: DIN;
  1221. font-weight: 500;
  1222. color: #fefefe;
  1223. line-height: 30rpx;
  1224. margin-top: 30rpx;
  1225. }
  1226. }
  1227. }
  1228. // 滚动明细
  1229. .commission-log {
  1230. min-height: 400rpx;
  1231. padding: 0 30rpx;
  1232. margin-top: 60rpx;
  1233. .log-scroll {
  1234. height: 380rpx;
  1235. .log-item-box {
  1236. height: 78rpx;
  1237. .log-time {
  1238. margin-left: 30rpx;
  1239. font-size: 22rpx;
  1240. font-weight: 500;
  1241. color: #fefefe;
  1242. text-align: right;
  1243. }
  1244. }
  1245. .loadmore-wrap {
  1246. line-height: 80rpx;
  1247. }
  1248. .log-item {
  1249. height: 48rpx;
  1250. background: rgba(#5e49c3, 0.4);
  1251. border-radius: 24rpx;
  1252. padding-left: 6rpx;
  1253. padding-right: 20rpx;
  1254. .log-img {
  1255. width: 40rpx;
  1256. height: 40rpx;
  1257. border-radius: 50%;
  1258. margin-right: 10rpx;
  1259. }
  1260. .log-text {
  1261. font-size: 22rpx;
  1262. font-weight: 500;
  1263. color: #fefefe;
  1264. max-width: 480rpx;
  1265. }
  1266. }
  1267. }
  1268. }
  1269. // 功能菜单
  1270. .commission-bottom-bg {
  1271. position: fixed;
  1272. width: 100%;
  1273. bottom: 0;
  1274. z-index: 6;
  1275. }
  1276. .menu-box {
  1277. flex-wrap: wrap;
  1278. margin: 30rpx;
  1279. // position: fixed;
  1280. // width: 750rpx;
  1281. bottom: 0;
  1282. z-index: 10;
  1283. .menu-item {
  1284. width: (690rpx/4);
  1285. margin-bottom: 50rpx;
  1286. .item-img {
  1287. width: 68rpx;
  1288. height: 68rpx;
  1289. }
  1290. .item-title {
  1291. font-size: 24rpx;
  1292. font-weight: 600;
  1293. color: #fff;
  1294. line-height: 30rpx;
  1295. margin-top: 16rpx;
  1296. }
  1297. }
  1298. }
  1299. .bill {
  1300. margin: 30rpx;
  1301. font-weight: bold;
  1302. }
  1303. .u-flex-col {
  1304. /* #ifndef APP-NVUE */
  1305. display: flex;
  1306. /* #endif */
  1307. flex-direction: column;
  1308. }
  1309. .poster {
  1310. padding: 24rpx 40rpx;
  1311. .footer-btn {
  1312. margin-top: 24rpx;
  1313. display: flex;
  1314. align-items: center;
  1315. justify-content: space-between;
  1316. view {
  1317. width: 319rpx;
  1318. height: 66rpx;
  1319. border-radius: 40rpx;
  1320. border: 1px solid #4070ff;
  1321. font-size: 26rpx;
  1322. font-family: PingFangSC-Regular, PingFang SC;
  1323. font-weight: 400;
  1324. color: #4070ff;
  1325. line-height: 66rpx;
  1326. text-align: center;
  1327. }
  1328. .save {
  1329. background: #4070ff;
  1330. color: #ffffff;
  1331. }
  1332. }
  1333. }
  1334. .dygbhg {
  1335. background: #ffffff;
  1336. border-radius: 15rpx 15rpx 0 0;
  1337. position: fixed;
  1338. bottom: 0;
  1339. left: 0;
  1340. width: 100%;
  1341. box-shadow: 0px 0px 10px #00000024;
  1342. display: flex;
  1343. align-items: center;
  1344. justify-content: space-evenly;
  1345. }
  1346. .whole {
  1347. width: 45%;
  1348. height: 88rpx;
  1349. display: flex;
  1350. color: #ffffff;
  1351. align-items: center;
  1352. justify-content: center;
  1353. background: #f3f3f3;
  1354. font-weight: bold;
  1355. border-radius: 60rpx;
  1356. color: #3d7eff;
  1357. }
  1358. .distinguish {
  1359. width: 45%;
  1360. height: 88rpx;
  1361. display: flex;
  1362. color: #ffffff;
  1363. align-items: center;
  1364. justify-content: center;
  1365. background: #3d7eff;
  1366. font-weight: bold;
  1367. border-radius: 60rpx;
  1368. margin: 38rpx 0;
  1369. margin-left: 4%;
  1370. }
  1371. </style>