user.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929
  1. <template>
  2. <view class="container">
  3. <!-- #ifdef APP-PLUS -->
  4. <view class="bar-height"></view>
  5. <!-- #endif -->
  6. <!-- <scroll-view class="content-box" scroll-y="true"> -->
  7. <view class="user-section">
  8. <view class="bg"><image src="../../static/user/ground.png" mode=""></image></view>
  9. <!-- top -->
  10. <view class="user-info-box ">
  11. <view class="detail flex" @click="navTo('/pages/userinfo/userinfo')">
  12. <view class="portrait-box"><image class="portrait" :src="userInfo.avatar || '/static/error/missing-face.png'"></image></view>
  13. <view class="info-box">
  14. <view class="username">{{ userInfo.nickname || '游客' }}</view>
  15. <view class="font-size-sm" v-if="userInfo.uid">邀请码:{{ userInfo.uid }}<text v-if="userInfo.level == 1" style="color: #5dbc7c;margin-left: 10rpx;">会员</text><text v-if="userInfo.level == 2" style="color: #dab176;margin-left: 10rpx;">副店长</text><text v-if="userInfo.level == 3" style="color: #dab176;margin-left: 10rpx;">店长</text></view>
  16. <view class="font-size-sm" style="color: #5dbc7c;" v-if="userInfo.level == 1 && userInfo.service == 0">{{'会员股权:' + userInfo.vip.stock_rights + ' 消费股权:' + userInfo.vip.consume_rights}}</view>
  17. </view>
  18. </view>
  19. <view class="config">
  20. <view class="setting " @click="navTo('/pages/userinfo/userinfo')"><image src="../../static/user/set.png" mode=""></image></view>
  21. 设置
  22. </view>
  23. </view>
  24. <!-- 会员卡功能 -->
  25. </view>
  26. <view class="item-box">
  27. <image class="arc" src="/static/img/arc.png"></image>
  28. <view class="mendian" v-if="userInfo.level == 1 && userInfo.service == 0">
  29. <view class="mendian-lift">
  30. <view class="img"><image src="../../static/img/mendian01.png" mode=""></image></view>
  31. <text class="null-mendian">{{ userInfo.store_name}}</text>
  32. </view>
  33. <view class="mendian-lift" @click="openhym">
  34. NO:{{userInfo.vip.card_no}}<image src="../../static/icon/hym.png" mode="" class="hym" >
  35. </view>
  36. </view>
  37. <view class="my-order">
  38. <view class="box-title flex borde-b">
  39. <view class="title"><text>我的订单</text></view>
  40. <view class="link" @click="navTo('/pages/order/order?state=5')" hover-class="common-hover"><text class="iconfont iconenter"></text></view>
  41. </view>
  42. <view class="order-section">
  43. <view class="order-item" @click="navTo('/pages/order/order?state=1')" hover-class="common-hover" :hover-stay-time="50">
  44. <view class=" icon1 position-relative">
  45. <image class="icon-img" src="/static/icon/i2.png" mode="aspectFit"></image>
  46. <view class="corner" v-if="orderInfo.unshipped_count > 0">
  47. <text>{{ orderInfo.unshipped_count }}</text>
  48. </view>
  49. </view>
  50. <text>待发货</text>
  51. </view>
  52. <view class="order-item" @click="navTo('/pages/order/order?state=2')" hover-class="common-hover" :hover-stay-time="50">
  53. <view class="icon1 position-relative">
  54. <image class="icon-img" src="/static/icon/i3.png" mode="aspectFit"></image>
  55. <view class="corner" v-if="orderInfo.received_count > 0">
  56. <text>{{ orderInfo.received_count }}</text>
  57. </view>
  58. </view>
  59. <text>待收货</text>
  60. </view>
  61. <view class="order-item" @click="navTo('/pages/order/order?state=3')" hover-class="common-hover" :hover-stay-time="50">
  62. <view class="icon1 position-relative">
  63. <image class="icon-img" src="/static/icon/i4.png" mode="aspectFit"></image>
  64. <view class="corner" v-if="orderInfo.evaluated_count > 0">
  65. <text>{{ orderInfo.evaluated_count }}</text>
  66. </view>
  67. </view>
  68. <text>待评价</text>
  69. </view>
  70. <view class="order-item" @click="navTo('/pages/order/refundOrder?state=0')" hover-class="common-hover" :hover-stay-time="50">
  71. <view class=" icon1 position-relative"><image class="icon-img" src="/static/icon/i1.png" mode="aspectFit"></image></view>
  72. <text>退款</text>
  73. </view>
  74. </view>
  75. </view>
  76. </view>
  77. <!-- <view class="cover-container"> -->
  78. <view class="vip" @click="navTo('/pages/wallet/openMember')" v-if="userInfo.level == 0"><image src="../../static/user/upgrade.png" mode=""></image></view>
  79. <!-- 订单 -->
  80. <view class="item-box " v-if="isShowIllegality">
  81. <view class="order-section order">
  82. <view class="order-item" @click="navTo('/pages/wallet/wallet')" hover-class="common-hover" :hover-stay-time="50">
  83. <view class=" icon position-relative"><image class="icon-img" src="../../static/user/balance.png" mode="aspectFit"></image></view>
  84. <text>我的余额</text>
  85. </view>
  86. <!-- <view class="order-item" @click="navTo('/pages/award/award')" hover-class="common-hover" :hover-stay-time="50">
  87. <view class=" icon position-relative"><image class="icon-img" src="../../static/user/commission.png" mode="aspectFit"></image></view>
  88. <text>我的佣金</text>
  89. </view> -->
  90. <view class="order-item" @click="navTo('/pages/coupon/consumer')" hover-class="common-hover" :hover-stay-time="50">
  91. <view class=" icon position-relative"><image class="icon-img" src="../../static/user/coupon.png" mode="aspectFit"></image></view>
  92. <text>我的消费券</text>
  93. </view>
  94. </view>
  95. <!-- 浏览历史 -->
  96. <view class="history-section ">
  97. <uni-list>
  98. <uni-list-item v-if="isShowIllegality" title="我的推广" @click="navTo('/pages/myteam/myteam')" thumb="/static/user/tuiguang.png"></uni-list-item>
  99. <uni-list-item title="邀请海报" @click="navTo('/pages/shareQrCode/index')" thumb="/static/user/haibao.png"></uni-list-item>
  100. <uni-list-item title="兑换会员卡" @click="go" thumb="/static/icon/czhy.png"></uni-list-item>
  101. <!-- <uni-list-item title="兑换会员卡" @click="go" thumb="/static/icon/czhy.png"></uni-list-item> -->
  102. <uni-list-item title="我的收藏" @click="navTo('/pages/favorites/favorites')" thumb="/static/user/collect.png"></uni-list-item>
  103. <uni-list-item title="收货地址" @click="navTo('/pages/address/address')" thumb="/static/user/address.png"></uni-list-item>
  104. <uni-list-item title="商家入口" @click="navTo('/pages/merchant/merchant')" thumb="/static/user/shopping.png" v-if="userInfo.service == 1"></uni-list-item>
  105. </uni-list>
  106. </view>
  107. </view>
  108. <!-- </scroll-view> -->
  109. <uni-popup ref="hympop" type="center">
  110. <view class="hym-wrap">
  111. <view class="hym-tit">
  112. 我的会员码
  113. </view>
  114. <view class="hym-val">
  115. <tki-qrcode :key="hym" cid="tki-qrcode-canvas" ref="qrcode"
  116. :val="hym" :size="300" unit="upx" background="#ffffff"
  117. foreground="#333333" pdground="#333333" icon="" :iconSize="0" :lv="3" :onval="true"
  118. :loadMake="true" :usingComponents="true" />
  119. </view>
  120. <view class="hym-num">
  121. 会员编号:{{hym}}
  122. </view>
  123. </view>
  124. </uni-popup>
  125. <uni-popup ref="popup" type="center">
  126. <view class="popup-box">
  127. <view class="img">
  128. <view class="img-font">兑换会员卡</view>
  129. <view class="img-bg"><image src="../../static/img/img009.png" mode=""></image></view>
  130. </view>
  131. <view class="mian">
  132. <view class="main-item">
  133. <view class="font">卡号</view>
  134. <input type="text" v-model="card" class="input" placeholder="请输入卡号" placeholder-class="input-font" />
  135. </view>
  136. <view class="main-item" style="margin-top: 40rpx;">
  137. <view class="font">密码</view>
  138. <input type="password" v-model="pwd" placeholder="请输入密码" class="input" placeholder-class="input-font" />
  139. </view>
  140. <view class="main-item" style="margin-top: 40rpx;">
  141. <view class="font">选择门店</view>
  142. <view class="input" @click="chooseStore">{{ storeInfo.name || '请选择门店' }}</view>
  143. </view>
  144. <view class="comfirm-box">
  145. <view class="cancel" @click="cancel">取消</view>
  146. <view class="comfirm" @click="comfirm()">确认兑换</view>
  147. </view>
  148. </view>
  149. </view>
  150. </uni-popup>
  151. </view>
  152. </template>
  153. <script>
  154. import uniPopup from '@/components/uni-popup/uni-popup.vue';
  155. import { verification } from '@/api/merchant.js';
  156. import { mapState, mapMutations } from 'vuex';
  157. import uniList from '@/components/uni-list/uni-list.vue';
  158. import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
  159. import { orderData, orderVerific } from '@/api/user.js';
  160. import { getUserInfo } from '@/api/login.js';
  161. import tkiQrcodes from '@/components/tki-qrcode/tki-qrcode.vue';
  162. let startY = 0,
  163. moveY = 0,
  164. pageAtTop = true;
  165. export default {
  166. components: {
  167. uniList,
  168. uniListItem,
  169. uniPopup,
  170. tkiQrcodes
  171. },
  172. data() {
  173. return {
  174. hym: '',//会员编号
  175. coverTransform: 'translateY(0px)',
  176. coverTransition: '0s',
  177. moving: false,
  178. userDowm: 0, //卡片升级专属高度
  179. userMaxDowm: 0, //卡片最高高度
  180. orderinfo: {
  181. complete_count: 0,
  182. received_count: 0,
  183. unshipped_count: 0,
  184. order_count: 0
  185. },
  186. // 判断是否已经点击过一次取消关注公众号
  187. watchful: true,
  188. card: '',
  189. pwd: '',
  190. storeInfo: {
  191. name: ''
  192. },
  193. qrsize: 80, // 二维码大小
  194. cid: 'tki-qrcode-canvas', //canvasId,页面存在多个二维码组件时需设置不同的ID
  195. size: 500, //生成的二维码大小
  196. unit: 'upx', //大小单位尺寸
  197. // show: true,//默认使用组件中的image标签显示二维码
  198. val: '', //要生成的内容
  199. background: '#ffffff', //二维码背景色
  200. foreground: '#333333', //二维码前景色
  201. pdground: '#333333', //二维码角标色
  202. icon: '', //二维码图标URL(必须是本地图片,网络图需要先下载至本地)
  203. iconSize: 40, //二维码图标大小
  204. lv: 3, //容错级别
  205. onval: true, //监听val值变化自动重新生成二维码
  206. loadMake: false, //组件初始化完成后自动生成二维码,val需要有值
  207. usingComponents: false, //是否使用了自定义组件模式(主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题)
  208. showLoading: true, //是否显示loading
  209. loadingText: '二维码生成中', //loading文字
  210. src: '', // 二维码生成后的图片地址或base64
  211. ratio: 1, //页面比例用于计算
  212. ctxSrc: '', //要显示的图片
  213. loading: true, //是否载入图片中
  214. };
  215. },
  216. onShow() {
  217. // 判断是否已经登录
  218. if (this.hasLogin) {
  219. this.loadBaseData();
  220. }
  221. },
  222. onReady() {
  223. // 初始化获取页面宽度
  224. uni.createSelectorQuery()
  225. .select('.container')
  226. .fields(
  227. {
  228. size: true
  229. },
  230. data => {
  231. // 计算最多下拉的高度
  232. this.userDowm = Math.floor((data.width / 750) * 200);
  233. // 计算最大触发修改高度事件
  234. this.userMaxDowm = Math.floor((data.width / 750) * 250);
  235. }
  236. )
  237. .exec();
  238. },
  239. computed: {
  240. ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
  241. // #ifdef H5
  242. ...mapState(['weichatObj']),
  243. // #endif
  244. ...mapState(['isShowIllegality'])
  245. },
  246. methods: {
  247. ...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
  248. // 打开会员码
  249. openhym() {
  250. this.hym = this.userInfo.vip.card_no
  251. this.$refs.hympop.open()
  252. },
  253. // 加载初始数据
  254. loadBaseData() {
  255. let obj = this;
  256. getUserInfo({})
  257. .then(({ data }) => {
  258. orderData({})
  259. .then(({ data }) => {
  260. obj.setOrderInfo(data);
  261. })
  262. .catch(e => {
  263. obj.setOrderInfo({
  264. complete_count: 0, //完成
  265. received_count: 0, //待收货
  266. unshipped_count: 0, //待发货
  267. order_count: 0, //订单总数
  268. unpaid_count: 0 //待付款
  269. });
  270. });
  271. obj.setUserInfo(data);
  272. // 判断是否已经关注公众号
  273. if (data.subscribe == 0 && obj.watchful) {
  274. uni.showModal({
  275. title: '温馨提醒',
  276. content: '为提供更好的服务,请关注公众号。',
  277. success: res => {
  278. obj.watchful = false;
  279. // 判断是否点击了确认
  280. if (res.confirm) {
  281. uni.navigateTo({
  282. url: '/pages/shareQrCode/wechatQr'
  283. });
  284. }
  285. }
  286. });
  287. }
  288. })
  289. .catch(e => {
  290. console.log(e);
  291. });
  292. },
  293. /**
  294. * 统一跳转接口,拦截未登录路由
  295. * navigator标签现在默认没有转场动画,所以用view
  296. */
  297. navTo(url) {
  298. if (!this.hasLogin) {
  299. url = '/pages/public/login';
  300. // #ifdef H5
  301. let weichatBrowser = uni.getStorageSync('weichatBrowser');
  302. // 判断是否为微信浏览器
  303. if (weichatBrowser) {
  304. url = '/pages/public/wxLogin';
  305. }
  306. // #endif
  307. // #ifdef MP-WEIXIN
  308. url = '/pages/public/wxLogin';
  309. // #endif
  310. }
  311. uni.navigateTo({
  312. url
  313. });
  314. },
  315. /**
  316. * 会员卡下拉和回弹
  317. * 1.关闭bounce避免ios端下拉冲突
  318. * 2.由于touchmove事件的缺陷(以前做小程序就遇到,比如20跳到40,h5反而好很多),下拉的时候会有掉帧的感觉
  319. * transition设置0.1秒延迟,让css来过渡这段空窗期
  320. * 3.回弹效果可修改曲线值来调整效果,推荐一个好用的bezier生成工具 http://cubic-bezier.com/
  321. */
  322. coverTouchstart(e) {
  323. // console.log(e);
  324. if (pageAtTop === false) {
  325. return;
  326. }
  327. this.coverTransition = 'transform .1s linear';
  328. startY = e.touches[0].clientY;
  329. },
  330. coverTouchmove(e) {
  331. // console.log(e);
  332. moveY = e.touches[0].clientY;
  333. let moveDistance = moveY - startY;
  334. let maxDowm = this.userMaxDowm;
  335. let Dowm = this.userDowm;
  336. if (moveDistance < 0) {
  337. this.moving = false;
  338. return;
  339. }
  340. this.moving = true;
  341. if (moveDistance >= Dowm && moveDistance < maxDowm) {
  342. moveDistance = Dowm;
  343. }
  344. if (moveDistance > 0 && moveDistance <= Dowm) {
  345. this.coverTransform = `translateY(${moveDistance}px)`;
  346. }
  347. },
  348. coverTouchend() {
  349. if (this.moving === false) {
  350. return;
  351. }
  352. this.moving = false;
  353. this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
  354. this.coverTransform = 'translateY(0px)';
  355. },
  356. // 核销
  357. openQr() {
  358. let obj = this;
  359. // #ifndef H5
  360. uni.scanCode({
  361. success(e) {
  362. obj.orderVerific(e.result);
  363. }
  364. });
  365. // #endif
  366. // #ifdef H5
  367. this.weichatObj.scanQRCode({
  368. needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
  369. scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
  370. success: function(res) {
  371. obj.orderVerific(res.resultStr); // 当needResult 为 1 时,扫码返回的结果
  372. }
  373. });
  374. // #endif
  375. },
  376. // 核销请求
  377. orderVerific(data) {
  378. orderVerific({
  379. verify_code: data
  380. })
  381. .then(e => {
  382. uni.showModal({
  383. title: '核销',
  384. content: '已核销成功',
  385. showCancel: false
  386. });
  387. })
  388. .catch(e => {
  389. uni.showModal({
  390. title: '错误',
  391. content: JSON.stringify(e),
  392. showCancel: false
  393. });
  394. console.log(e);
  395. });
  396. },
  397. // 选择门店
  398. chooseStore() {
  399. uni.navigateTo({
  400. url: '/pages/shoping/list?type=3'
  401. });
  402. },
  403. go() {
  404. this.$refs.popup.open();
  405. },
  406. cancel() {
  407. this.$refs.popup.close();
  408. this.card = '';
  409. this.pwd = '';
  410. this.storeInfo = { name: '' };
  411. },
  412. comfirm() {
  413. verification({
  414. card_number: this.card,
  415. card_password: this.pwd,
  416. type: 0,
  417. is_confirm: 1,
  418. reg_store_id: this.storeInfo.id
  419. })
  420. .then(e => {
  421. console.log(e);
  422. this.card = '';
  423. this.pwd = '';
  424. this.storeInfo = { name: '' };
  425. })
  426. .catch(e => {
  427. console.log(e);
  428. this.card = '';
  429. this.pwd = '';
  430. this.storeInfo = { name: '' };
  431. });
  432. this.$refs.popup.close();
  433. }
  434. }
  435. };
  436. </script>
  437. <style lang="scss">
  438. %flex-center {
  439. display: flex;
  440. flex-direction: column;
  441. justify-content: center;
  442. align-items: center;
  443. }
  444. %section {
  445. display: flex;
  446. justify-content: space-around;
  447. align-content: center;
  448. background: #fff;
  449. border-radius: 10rpx;
  450. }
  451. .container {
  452. height: 100%;
  453. background-color: #ffffff;
  454. /* #ifdef APP-PLUS */
  455. .bar-height {
  456. height: var(--status-bar-height);
  457. background-color: $base-color;
  458. }
  459. /* #endif */
  460. }
  461. .content-box {
  462. height: 100%;
  463. }
  464. .user-section {
  465. height: 435rpx;
  466. padding: 60rpx 0 0 0;
  467. position: relative;
  468. .bg {
  469. position: absolute;
  470. height: 480rpx;
  471. width: 100%;
  472. left: 0;
  473. top: 0;
  474. image {
  475. width: 100%;
  476. height: 100%;
  477. }
  478. // background-color: $base-color;
  479. }
  480. }
  481. .user-info-box {
  482. width: 90%;
  483. padding-left: 20rpx;
  484. margin: 0 auto;
  485. display: flex;
  486. height: 280rpx;
  487. align-items: stretch;
  488. background-color: #e9f8f1;
  489. border-radius: 20rpx;
  490. color: white;
  491. display: flex;
  492. justify-content: space-between;
  493. position: relative;
  494. z-index: 0;
  495. .detail {
  496. margin: 20rpx 0 0 0;
  497. height: 130rpx;
  498. .portrait-box {
  499. height: 100%;
  500. .portrait {
  501. width: 130rpx;
  502. height: 100%;
  503. border: 5rpx solid #fff;
  504. border-radius: 50%;
  505. }
  506. }
  507. .info-box {
  508. margin-left: 20rpx;
  509. line-height: 1.5;
  510. color: black;
  511. .username {
  512. font-size: $font-lg + 6rpx;
  513. height: 100%;
  514. }
  515. }
  516. }
  517. .config {
  518. margin-top: 60rpx;
  519. font-size: 28rpx;
  520. font-family: PingFang SC;
  521. font-weight: 500;
  522. color: #52c696;
  523. display: flex;
  524. justify-content: center;
  525. align-items: center;
  526. width: 165rpx;
  527. height: 64rpx;
  528. background: #ffffff;
  529. border-radius: 32px 0px 0px 32px;
  530. .setting {
  531. width: 32rpx;
  532. height: 32rpx;
  533. image {
  534. width: 100%;
  535. height: 100%;
  536. }
  537. // margin-right: 51rpx;
  538. }
  539. }
  540. }
  541. .vip-card-box {
  542. display: flex;
  543. flex-direction: column;
  544. color: #f7d680;
  545. height: 240rpx;
  546. background: linear-gradient(left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
  547. border-radius: 16rpx 16rpx 0 0;
  548. overflow: hidden;
  549. position: relative;
  550. padding: 20rpx 24rpx;
  551. .card-bg {
  552. position: absolute;
  553. top: 20rpx;
  554. right: 0;
  555. width: 380rpx;
  556. height: 260rpx;
  557. }
  558. .b-btn {
  559. position: absolute;
  560. right: 20rpx;
  561. top: 16rpx;
  562. width: 132rpx;
  563. height: 40rpx;
  564. text-align: center;
  565. line-height: 40rpx;
  566. font-size: 22rpx;
  567. color: #36343c;
  568. border-radius: 20px;
  569. background: linear-gradient(left, #f9e6af, #ffd465);
  570. z-index: 1;
  571. }
  572. .tit {
  573. font-size: $font-base + 2rpx;
  574. color: #f7d680;
  575. margin-bottom: 28rpx;
  576. .iconfont {
  577. color: #f6e5a3;
  578. margin-right: 16rpx;
  579. font-size: 30rpx;
  580. }
  581. }
  582. .e-b {
  583. font-size: $font-sm;
  584. color: #d8cba9;
  585. margin-top: 10rpx;
  586. }
  587. }
  588. .vip {
  589. margin-top: -110rpx;
  590. margin-bottom: 110rpx;
  591. padding: 0 30rpx;
  592. height: 170rpx;
  593. image {
  594. height: 100%;
  595. width: 100%;
  596. }
  597. }
  598. .cover-container {
  599. display: flex;
  600. flex-direction: column;
  601. background: $page-color-base;
  602. padding: 0 30rpx;
  603. position: relative;
  604. background: #f5f5f5;
  605. padding-bottom: 20rpx;
  606. margin-top: -110rpx;
  607. .arc {
  608. position: absolute;
  609. left: 0;
  610. top: -34rpx;
  611. width: 100%;
  612. height: 36rpx;
  613. }
  614. }
  615. .tj-sction {
  616. @extend %section;
  617. .tj-item {
  618. @extend %flex-center;
  619. flex-direction: column;
  620. height: 140rpx;
  621. font-size: $font-sm;
  622. color: #75787d;
  623. }
  624. .num {
  625. font-size: $font-lg;
  626. color: $font-color-dark;
  627. margin-bottom: 8rpx;
  628. }
  629. }
  630. .item-box {
  631. position: relative;
  632. background-color: white;
  633. top: -150rpx;
  634. box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
  635. .arc {
  636. position: absolute;
  637. left: 0;
  638. top: -34rpx;
  639. width: 100%;
  640. height: 36rpx;
  641. }
  642. .mendian {
  643. padding: 0 40rpx;
  644. height: 60rpx;
  645. background-color: #ffffff;
  646. display: flex;
  647. justify-content: space-between;
  648. align-items: center;
  649. margin-bottom: 20rpx;
  650. .mendian-lift {
  651. display: flex;
  652. .null-mendian {
  653. font-size: 28rpx;
  654. font-weight: bold;
  655. }
  656. .hym {
  657. width: 40rpx;
  658. height: 40rpx;
  659. margin-left: 10rpx;
  660. }
  661. .img {
  662. margin: 0 10rpx 0;
  663. width: 36rpx;
  664. height: 36rpx;
  665. image {
  666. width: 100%;
  667. height: 100%;
  668. }
  669. }
  670. }
  671. .mendian-right {
  672. display: flex;
  673. align-items: center;
  674. .duihuan {
  675. font-size: 24rpx;
  676. }
  677. }
  678. }
  679. .my-order {
  680. width: 680rpx;
  681. margin: auto;
  682. // margin-top: 10rpx;
  683. // padding: 0 20rpx;
  684. border-radius: 20rpx;
  685. box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
  686. }
  687. .box-title {
  688. line-height: 1;
  689. padding: 30rpx;
  690. .title {
  691. font-size: $font-lg;
  692. font-weight: bold;
  693. }
  694. .link {
  695. font-size: $font-base - 2rpx;
  696. color: $font-color-light;
  697. }
  698. }
  699. // .order{
  700. // margin-top: 70rpx;
  701. // }
  702. .order-section {
  703. @extend %section;
  704. padding: 28rpx 0;
  705. .order-item {
  706. @extend %flex-center;
  707. // width: 120rpx;
  708. width: 25%;
  709. height: 120rpx;
  710. border-radius: 10rpx;
  711. font-size: $font-sm;
  712. color: $font-color-dark;
  713. }
  714. .iconfont {
  715. font-size: 48rpx;
  716. margin-bottom: 18rpx;
  717. color: #fa436a;
  718. }
  719. .icon-shouhoutuikuan {
  720. font-size: 44rpx;
  721. }
  722. .icon {
  723. height: 88rpx;
  724. width: 90rpx;
  725. margin-bottom: 18rpx;
  726. background-size: 100%;
  727. background-repeat: no-repeat;
  728. background-position: center;
  729. .icon-img {
  730. width: 100%;
  731. height: 100%;
  732. }
  733. }
  734. .icon1 {
  735. height: 50rpx;
  736. width: 48rpx;
  737. margin-bottom: 18rpx;
  738. background-size: 100%;
  739. background-repeat: no-repeat;
  740. background-position: center;
  741. .icon-img {
  742. width: 100%;
  743. height: 100%;
  744. }
  745. }
  746. }
  747. }
  748. .history-section {
  749. // padding: 30rpx 0 0;
  750. margin-top: 20rpx;
  751. background: #fff;
  752. border-radius: 10rpx;
  753. .sec-header {
  754. display: flex;
  755. align-items: center;
  756. font-size: $font-base;
  757. color: $font-color-dark;
  758. line-height: 40rpx;
  759. margin-left: 30rpx;
  760. padding-top: 30rpx;
  761. .iconfont {
  762. font-size: 44rpx;
  763. color: $color-red;
  764. margin-right: 16rpx;
  765. line-height: 40rpx;
  766. }
  767. }
  768. .h-list {
  769. white-space: nowrap;
  770. padding: 30rpx 30rpx 0;
  771. image {
  772. display: inline-block;
  773. width: 160rpx;
  774. height: 160rpx;
  775. margin-right: 20rpx;
  776. border-radius: 10rpx;
  777. }
  778. }
  779. }
  780. .popup-box {
  781. width: 650rpx;
  782. padding-bottom: 30rpx;
  783. background-color: #ffffff;
  784. border-radius: 20rpx;
  785. position: relative;
  786. .img {
  787. position: relative;
  788. top: -56rpx;
  789. left: 0;
  790. width: 650rpx;
  791. height: 132rpx;
  792. z-index: 100;
  793. text-align: center;
  794. line-height: 132rpx;
  795. .img-bg {
  796. position: absolute;
  797. left: 50%;
  798. top: 0;
  799. margin-left: -250rpx;
  800. border-radius: 20rpx 20rpx 0 0;
  801. width: 500rpx;
  802. height: 132rpx;
  803. image {
  804. width: 100%;
  805. height: 100%;
  806. }
  807. }
  808. .img-font {
  809. line-height: 120rpx;
  810. position: relative;
  811. z-index: 10;
  812. text-align: center;
  813. font-size: 32rpx;
  814. font-weight: bold;
  815. color: #54300f;
  816. }
  817. }
  818. .mian {
  819. margin-top: -10rpx;
  820. display: flex;
  821. flex-direction: column;
  822. align-items: center;
  823. // padding: 32rpx 32rpx;
  824. background-color: #ffffff;
  825. border-radius: 0 0 20rpx 20rpx;
  826. text-align: center;
  827. padding: 20rpx;
  828. width: 100%;
  829. .main-item {
  830. display: flex;
  831. width: 580rpx;
  832. align-items: center;
  833. padding: 20rpx 40rpx;
  834. border-radius: 10rpx;
  835. background: #f5f2e5;
  836. height: 100rpx;
  837. .font {
  838. color: #623324;
  839. font-size: 30rpx;
  840. }
  841. .input {
  842. margin-left: 20rpx;
  843. text-align: left;
  844. color: #cdc0b3;
  845. font-size: 28rpx;
  846. }
  847. .input-font {
  848. color: #cdc0b3;
  849. font-size: 28rpx;
  850. }
  851. }
  852. .comfirm-box {
  853. margin-top: 80rpx;
  854. display: flex;
  855. // margin-bottom: 32rpx;
  856. // justify-content: space-around;
  857. .cancel {
  858. display: flex;
  859. align-items: center;
  860. justify-content: center;
  861. width: 260rpx;
  862. height: 100rpx;
  863. border: 1px solid #dcc786;
  864. border-radius: 10px;
  865. font-size: 32rpx;
  866. color: #605128;
  867. }
  868. .comfirm {
  869. margin-left: 60rpx;
  870. display: flex;
  871. align-items: center;
  872. justify-content: center;
  873. width: 260rpx;
  874. height: 100rpx;
  875. background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
  876. border-radius: 10px;
  877. font-size: 32rpx;
  878. color: #605128;
  879. }
  880. }
  881. }
  882. }
  883. .hym-wrap {
  884. width: 500rpx;
  885. height: 500rpx;
  886. background-color: #fff;
  887. text-align: center;
  888. border-radius: 20rpx;
  889. .hym-tit {
  890. color: $base-color;
  891. padding: 20rpx 0;
  892. font-size: 48rpx;
  893. }
  894. .hym-val {
  895. width: 300rpx;
  896. height: 300rpx;
  897. margin: auto;
  898. }
  899. .hym-num {
  900. font-size: 28rpx;
  901. font-weight: bold;
  902. padding-top: 20rpx;
  903. }
  904. }
  905. </style>