index.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948
  1. <template>
  2. <view>
  3. <!--header-->
  4. <!-- #ifndef H5-->
  5. <tui-navigation-bar dropDownHide splitLine @init="initNavigation" @change="opacityChange" :scrollTop="scrollTop"
  6. title="我的" backgroundColor="#fff" color="#333">
  7. <view class="tui-header-box" :style="{ marginTop: top + 'px' }"></view>
  8. </tui-navigation-bar>
  9. <!-- #endif -->
  10. <!--header-->
  11. <view :style="'background:'+pagestyleconfig.userstylebgcolor" class="tui-mybg-box">
  12. <image v-if="pagestyleconfig.userstylebgimg" :src="pagestyleconfig.userstylebgimg" class="tui-my-bg"
  13. mode="widthFix"></image>
  14. <image v-if="!pagestyleconfig.userstylebgimg && !pagestyleconfig.userstylebgcolor"
  15. src="https://daopic.samcms.com/xm_static/images/img_bg_3x.png" class="tui-my-bg" mode="widthFix"></image>
  16. <view class="tui-header-center">
  17. <image v-if="memberinfo.is_online"
  18. :src="memberinfo.userpic || '/static/images/my/mine_def_touxiang_3x.png'" class="tui-avatar"
  19. @tap="navigateTo('/pagesA/my/userInfo/userInfo')">
  20. </image>
  21. <image v-else src="/static/images/my/mine_def_touxiang_3x.png" class="tui-avatar"
  22. @tap="navigateTo('/pagesA/my/userInfo/userInfo')">
  23. </image>
  24. <view class="tui-info" v-if="memberinfo.is_online">
  25. <view class="tui-nickname">
  26. {{memberinfo.nickname}}
  27. </view>
  28. <view v-if="memberinfo.gname" class="tui-explain">{{memberinfo.gname}}</view>
  29. </view>
  30. <view class="tui-login" v-if="!memberinfo.is_online" @click="login">
  31. <text>登录/注册</text>
  32. <tui-icon name="arrowright" color="#fff" :size="36" unit="rpx"></tui-icon>
  33. </view>
  34. <view class="tui-btn-edit" v-if="memberinfo.is_online">
  35. <tui-button type="white" :plain="true" shape="circle" width="92rpx" height="40rpx" :size="22"
  36. @click="navigateTo('/pagesA/my/userInfo/userInfo?gotopage=/pagesA/my/userInfo/index')">编辑
  37. </tui-button>
  38. </view>
  39. <view class="tui-set-box" v-if="memberinfo.is_online">
  40. <view class="tui-icon-box tui-icon-message">
  41. <!--<tui-icon @tap="navigateTo('/pagesA/my/message/message')" name="message" color="#fff" :size="26"></tui-icon>
  42. <view v-if="memberinfo.is_online" class="tui-badge tui-badge-white">1</view>-->
  43. </view>
  44. <view class="tui-icon-box tui-icon-setup" @tap="navigateTo('/pagesA/my/set/set')">
  45. <tui-icon name="setup" color="#fff" :size="26"></tui-icon>
  46. </view>
  47. </view>
  48. </view>
  49. <view class="tui-header-btm">
  50. <view @click="recharge" class="tui-btm-item">
  51. <view class="tui-btm-num">{{memberinfo.balance}}</view>
  52. <view class="tui-btm-text">余额</view>
  53. </view>
  54. <view @tap="navigateTo('/pagesA/my/myCoupon/myCoupon')" class="tui-btm-item">
  55. <view class="tui-btm-num">
  56. <text>{{memberinfo.coupon}}</text>
  57. <view class="tui-badgewhite-dot"></view>
  58. </view>
  59. <view class="tui-btm-text">优惠券</view>
  60. </view>
  61. <view @tap="navigateTo('/pagesA/my/points/points')" class="tui-btm-item">
  62. <view class="tui-btm-num">
  63. <text>{{memberinfo.points}}</text>
  64. <view class="tui-badgewhite-dot"></view>
  65. </view>
  66. <view class="tui-btm-text">{{lang.points}}</view>
  67. </view>
  68. <view @tap="navigateTo('/pagesA/my/fx/index')" class="tui-btm-item">
  69. <view class="tui-btm-num">{{memberinfo.agent ? memberinfo.agent.income : ''}}</view>
  70. <view v-if="module==version3" class="tui-btm-text">佣金</view>
  71. <view v-if="module==version2" class="tui-btm-text">创业收入</view>
  72. </view>
  73. </view>
  74. </view>
  75. <view class="tui-content-box">
  76. <view v-if="is_submitaudit!=1 && memberconfig.is_vip_paid==1" class="vip-box" style="margin-bottom: 20rpx;">
  77. <tui-list-cell backgroundColor="#5c5c5c" :arrow="false" :hover="false" padding="0" unlined
  78. :lineLeft="false" @click="navigateTo('/pagesA/my/vip_paid/index')">
  79. <view class="vip-box-header">
  80. <view class="vip-box-title">{{memberinfo.gname ? memberinfo.gname : 'VIP会员卡'}}</view>
  81. <view class="tui-ml-auto">
  82. <button class="vip-box-but">{{memberinfo.gid ? '升级会员' : '立即开通'}}</button>
  83. </view>
  84. </view>
  85. </tui-list-cell>
  86. </view>
  87. <view v-if="module==version3" class="tui-box tui-order-box">
  88. <tui-list-cell :arrow="true" padding="0" unlined :lineLeft="false"
  89. @click="navigateTo('/pagesA/my/myOrder/myOrder?ptype=2')">
  90. <view class="tui-cell-header">
  91. <view class="tui-cell-title">我的订单</view>
  92. <view class="tui-cell-sub">全部订单</view>
  93. </view>
  94. </tui-list-cell>
  95. <view class="tui-order-list">
  96. <view class="tui-order-item" @tap="navigateTo('/pagesA/my/myOrder/myOrder?currentTab=1&ptype=2')">
  97. <view class="tui-icon-box">
  98. <image src="/static/images/mall/my/icon_daifukuan_3x.png" class="tui-order-icon"></image>
  99. <view v-if="serviceorder[1]>0" class="tui-badge tui-badge-red">{{serviceorder[1]}}</view>
  100. </view>
  101. <view class="tui-order-text">待付款</view>
  102. </view>
  103. <view class="tui-order-item" @tap="navigateTo('/pagesA/my/myOrder/myOrder?currentTab=2&ptype=2')">
  104. <view class="tui-icon-box">
  105. <image src="/static/images/mall/my/icon_daifahuo_3x.png" class="tui-order-icon"></image>
  106. <view v-if="serviceorder[3]>0" class="tui-badge tui-badge-red">{{serviceorder[3]}}</view>
  107. </view>
  108. <view class="tui-order-text">待服务</view>
  109. </view>
  110. <view class="tui-order-item" @tap="navigateTo('/pagesA/my/myOrder/myOrder?currentTab=3&ptype=2')">
  111. <view class="tui-icon-box">
  112. <image src="/static/images/mall/my/icon_daishouhuo_3x.png" class="tui-order-icon"></image>
  113. <view v-if="serviceorder[5]>0" class="tui-badge tui-badge-red">{{serviceorder[5]}}</view>
  114. </view>
  115. <view class="tui-order-text">已服务</view>
  116. </view>
  117. <view class="tui-order-item" @tap="navigateTo('/pagesA/my/myOrder/myOrder?currentTab=5&ptype=2')">
  118. <view class="tui-icon-box">
  119. <image src="/static/images/mall/my/icon_pingjia_3x.png" class="tui-order-icon"></image>
  120. <view v-if="serviceorder[7]>0" class="tui-badge tui-badge-red">{{serviceorder[7]}}</view>
  121. </view>
  122. <view class="tui-order-text">评价</view>
  123. </view>
  124. <view class="tui-order-item" @tap="navigateTo('/pagesA/my/myOrder/myOrder?currentTab=4&ptype=2')">
  125. <view class="tui-icon-box">
  126. <image src="/static/images/mall/my/icon_tuikuan_3x.png" class="tui-order-icon"></image>
  127. <view v-if="serviceorder[6]>0" class="tui-badge tui-badge-red">{{serviceorder[6]}}</view>
  128. </view>
  129. <view class="tui-order-text">退款/售后</view>
  130. </view>
  131. </view>
  132. </view>
  133. <view v-if="module==version2" class="tui-box tui-order-box">
  134. <tui-list-cell :arrow="true" padding="0" unlined :lineLeft="false"
  135. @click="navigateTo('/pagesA/my/myOrder/myOrder?ptype=1')">
  136. <view class="tui-cell-header">
  137. <view class="tui-cell-title">我的订单</view>
  138. <view class="tui-cell-sub">全部订单</view>
  139. </view>
  140. </tui-list-cell>
  141. <view class="tui-order-list">
  142. <view class="tui-order-item" @tap="navigateTo('/pagesA/my/myOrder/myOrder?currentTab=1&ptype=1')">
  143. <view class="tui-icon-box">
  144. <image src="/static/images/mall/my/icon_daifukuan_3x.png" class="tui-order-icon"></image>
  145. <view v-if="goodsorder[1]>0" class="tui-badge tui-badge-red">{{goodsorder[1]}}</view>
  146. </view>
  147. <view class="tui-order-text">待付款</view>
  148. </view>
  149. <view class="tui-order-item" @tap="navigateTo('/pagesA/my/myOrder/myOrder?currentTab=2&ptype=1')">
  150. <view class="tui-icon-box">
  151. <image src="/static/images/mall/my/icon_daifahuo_3x.png" class="tui-order-icon"></image>
  152. <view v-if="goodsorder[2]>0" class="tui-badge tui-badge-red">{{goodsorder[2]}}</view>
  153. </view>
  154. <view class="tui-order-text">待发货</view>
  155. </view>
  156. <view class="tui-order-item" @tap="navigateTo('/pagesA/my/myOrder/myOrder?currentTab=3&ptype=1')">
  157. <view class="tui-icon-box">
  158. <image src="/static/images/mall/my/icon_daishouhuo_3x.png" class="tui-order-icon"></image>
  159. <view v-if="goodsorder[3]>0" class="tui-badge tui-badge-red">{{goodsorder[3]}}</view>
  160. </view>
  161. <view class="tui-order-text">已发货</view>
  162. </view>
  163. <view class="tui-order-item" @tap="navigateTo('/pagesA/my/myOrder/myOrder?currentTab=4&ptype=1')">
  164. <view class="tui-icon-box">
  165. <image src="/static/images/mall/my/icon_pingjia_3x.png" class="tui-order-icon"></image>
  166. <view v-if="goodsorder[7]>0" class="tui-badge tui-badge-red">{{goodsorder[7]}}</view>
  167. </view>
  168. <view class="tui-order-text">评价</view>
  169. </view>
  170. <view class="tui-order-item" @tap="navigateTo('/pagesA/my/myOrder/myOrder?currentTab=5&ptype=1')">
  171. <view class="tui-icon-box">
  172. <image src="/static/images/mall/my/icon_tuikuan_3x.png" class="tui-order-icon"></image>
  173. <view v-if="goodsorder[6]>0" class="tui-badge tui-badge-red">{{goodsorder[6]}}</view>
  174. </view>
  175. <view class="tui-order-text">退款/售后</view>
  176. </view>
  177. </view>
  178. </view>
  179. <view class="tui-box tui-tool-box">
  180. <view class="tui-tool-list tui-flex-wrap">
  181. <view class="tui-tool-item" @tap="navigateTo('/pagesA/my/records/records')">
  182. <view class="tui-icon-box">
  183. <image src="/static/images/mall/my/icon_zhihuan_3x.png" class="tui-tool-icon"></image>
  184. </view>
  185. <view class="tui-tool-text">资金明细</view>
  186. </view>
  187. <view class="tui-tool-item" @tap="navigateTo('/pagesA/my/points/points')">
  188. <view class="tui-icon-box">
  189. <image src="/static/images/mall/my/jifen.png" class="tui-tool-icon"></image>
  190. </view>
  191. <view class="tui-tool-text">{{lang.points}}明细</view>
  192. </view>
  193. <view class="tui-tool-item" @tap="navigateTo('/pagesA/my/myCoupon/myCoupon')">
  194. <view class="tui-icon-box">
  195. <image src="/static/images/mall/my/myCoupon.png" class="tui-tool-icon"></image>
  196. </view>
  197. <view class="tui-tool-text">我的优惠券</view>
  198. </view>
  199. <!-- #ifdef MP-WEIXIN -->
  200. <button v-if="configkefu.minionline==1 || configkefu.minionline==3" @click="toim" class="tui-tool-item">
  201. <view class="tui-icon-box">
  202. <image src="/static/images/mall/my/icon_kefu_3x.png" class="tui-tool-icon"></image>
  203. </view>
  204. <view class="tui-tool-text">客服服务</view>
  205. </button>
  206. <button v-else-if="configkefu.minionline==2" @click="toimwebview(configkefu.kefuurl)" class="tui-tool-item">
  207. <view class="tui-icon-box">
  208. <image src="/static/images/mall/my/icon_kefu_3x.png" class="tui-tool-icon"></image>
  209. </view>
  210. <view class="tui-tool-text">客服服务</view>
  211. </button>
  212. <button v-else open-type="contact" class="tui-tool-item">
  213. <view class="tui-icon-box">
  214. <image src="/static/images/mall/my/icon_kefu_3x.png" class="tui-tool-icon"></image>
  215. </view>
  216. <view class="tui-tool-text">客服服务</view>
  217. </button>
  218. <!-- #endif -->
  219. <!-- #ifndef MP-WEIXIN -->
  220. <view class="tui-tool-item" @tap="toim">
  221. <view class="tui-icon-box">
  222. <image src="/static/images/mall/my/icon_kefu_3x.png" class="tui-tool-icon"></image>
  223. </view>
  224. <view class="tui-tool-text">客服服务</view>
  225. </view>
  226. <!-- #endif -->
  227. </view>
  228. </view>
  229. <view class="tui-box tui-tool-box">
  230. <tui-list-view>
  231. <tui-list-cell v-for="(menuitem,index) in menulist" @tap="navigateTo(menuitem.pagePath)"
  232. :arrow="true">
  233. <view class="tui-item-box">
  234. <view class="tui-icon-box">
  235. <image :src="menuitem.iconPath" class="tui-tool-icon"></image>
  236. </view>
  237. <view class="tui-list-cell_name">{{menuitem.text}}</view>
  238. </view>
  239. </tui-list-cell>
  240. </tui-list-view>
  241. </view>
  242. <!--猜你喜欢-->
  243. <block v-if="recommendgoods.length>0">
  244. <tui-divider :size="28" :bold="true" color="#333" width="50%">猜你喜欢</tui-divider>
  245. <view class="tui-product-list">
  246. <view class="tui-product-container">
  247. <block v-for="(item, index) in recommendgoods" :key="index">
  248. <!--商品列表-->
  249. <view class="tui-pro-item" hover-class="hover" :hover-start-time="150"
  250. @tap="navigateTo('/pages/goodsDetail/goodsDetail?id='+item.id)">
  251. <image :src="item.pic" class="tui-pro-img" mode="widthFix" />
  252. <view class="tui-pro-content">
  253. <view class="tui-pro-tit">{{ item.name }}</view>
  254. <view>
  255. <view class="tui-pro-price">
  256. <text v-if="item.is_points_goods==1"
  257. class="tui-sale-price">{{lang.points}}:{{ item.pay_points }}</text>
  258. <text v-if="item.is_points_goods!=1"
  259. class="tui-sale-price">¥{{ item.price }}</text>
  260. <text v-if="item.costs>0" class="tui-factory-price">¥{{ item.costs }}</text>
  261. </view>
  262. <view class="tui-pro-pay">{{ item.sale_count }}人付款</view>
  263. </view>
  264. </view>
  265. </view>
  266. </block>
  267. </view>
  268. </view>
  269. </block>
  270. </view>
  271. <tui-tabbar :current="current">
  272. </tui-tabbar>
  273. </view>
  274. </template>
  275. <script>
  276. export default {
  277. components: {},
  278. data() {
  279. return {
  280. config: {},
  281. lang:{},
  282. memberconfig:{},
  283. configkefu:{},
  284. memberinfo: [],
  285. userordercount: [],
  286. serviceorder:[],
  287. goodsorder:[],
  288. current: '',
  289. top: 0, //标题图标距离顶部距离
  290. opacity: 0,
  291. scrollTop: 0.5,
  292. agentconfig: [],
  293. pagestyleconfig: [],
  294. recommendgoods: [],
  295. module: this.$module,
  296. version2: this.$version2,
  297. version3: this.$version3,
  298. menulist: [],
  299. is_submitaudit: 1
  300. };
  301. },
  302. onLoad: function(e) {
  303. let _this = this;
  304. uni.setStorageSync('NewMessage', '');
  305. // #ifdef MP-WEIXIN
  306. this.current = "/" + this.__route__;
  307. // #endif
  308. //#ifdef H5
  309. this.current = this.$route.path;
  310. //#endif
  311. let obj = {};
  312. // #ifdef MP-WEIXIN
  313. obj = wx.getMenuButtonBoundingClientRect();
  314. // #endif
  315. // #ifdef MP-BAIDU
  316. obj = swan.getMenuButtonBoundingClientRect();
  317. // #endif
  318. // #ifdef MP-ALIPAY
  319. my.hideAddToDesktopMenu();
  320. // #endif
  321. uni.getSystemInfo({
  322. success: res => {
  323. this.width = obj.left || res.windowWidth;
  324. this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
  325. this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
  326. this.scrollH = res.windowWidth * 0.6;
  327. }
  328. });
  329. _this.$request.post('bottommenu.list', {
  330. mo: 'member'
  331. }).then(res => {
  332. if (res.errno == 0) {
  333. _this.menulist = res.data.list;
  334. }
  335. });
  336. _this.$request.get('Goods.recommend').then(res => {
  337. if (res.errno == 0) {
  338. _this.recommendgoods = res.data;
  339. }
  340. });
  341. _this.$request.get('Lang.getlang').then(res => {
  342. if (res.errno == 0) {
  343. _this.lang = res.data;
  344. }
  345. });
  346. _this.$config.init(function() {
  347. _this.configkefu = _this.$config.getConf("kefu")||{};
  348. _this.module = _this.$config.getConf("module");
  349. });
  350. _this.$request.post('config', {
  351. mo: 'agent'
  352. }).then(res => {
  353. if (res.errno == 0) {
  354. _this.agentconfig = res.data
  355. }
  356. });
  357. _this.$request.post('config', {
  358. mo: 'pagestyle'
  359. }).then(res => {
  360. if (res.errno == 0) {
  361. _this.pagestyleconfig = res.data
  362. }
  363. });
  364. _this.$util.getUserInfo(function(userInfo) {
  365. //Console.log("adfs");
  366. _this.$request.get('member.detail', {
  367. samkey: (new Date()).valueOf()
  368. }).then(res => {
  369. if (res.errno == 0) {
  370. _this.memberinfo = res.data;
  371. _this.is_submitaudit = res.data.is_submitaudit;
  372. }
  373. });
  374. });
  375. },
  376. onShow: function() {
  377. let _this = this;
  378. _this.$request.post('Config.memberislogin', {
  379. samkey: (new Date()).valueOf()
  380. }).then(res => {
  381. if(res.data){
  382. console.log(res.data.userInfo_is_login);
  383. _this.memberconfig = res.data;
  384. if (res.data.userInfo_is_login == 1) {
  385. uni.setStorageSync('gotopage', '/pagesA/my/userInfo/index');
  386. _this.sam.checktelephone().then(res => {
  387. });
  388. }
  389. }
  390. });
  391. _this.$request.get('ordercount.userordercount', {
  392. samkey: (new Date()).valueOf()
  393. }).then(res => {
  394. if (res.errno == 0) {
  395. _this.userordercount = res.data;
  396. if(_this.userordercount.serviceorder){
  397. _this.serviceorder = _this.userordercount.serviceorder;
  398. }
  399. if(_this.userordercount.goodsorder){
  400. _this.goodsorder = _this.userordercount.goodsorder;
  401. }
  402. }
  403. });
  404. },
  405. methods: {
  406. initNavigation(e) {
  407. this.opacity = e.opacity;
  408. this.top = e.top;
  409. },
  410. opacityChange(e) {
  411. this.opacity = e.opacity;
  412. },
  413. navigateTo(url) {
  414. uni.navigateTo({
  415. url: url
  416. });
  417. },
  418. recharge() {
  419. if (this.is_submitaudit != 1 && this.memberconfig.is_recharge==1) {
  420. uni.navigateTo({
  421. url: '/pagesA/my/recharge/recharge?isshow=1'
  422. });
  423. }
  424. },
  425. toimwebview(url) {
  426. this.tui.href("/pages/webview/h5?url=" + url)
  427. },
  428. toim() {
  429. if (this.configkefu.minionline == 2 && this.configkefu.kefuurl) {
  430. this.tui.href(this.configkefu.kefuurl);
  431. } else if (this.configkefu.minionline == 3) {
  432. var telstr = this.configkefu.kefutel;
  433. uni.makePhoneCall({
  434. phoneNumber: telstr
  435. });
  436. } else {
  437. this.tui.href("/pages/im/h5");
  438. }
  439. },
  440. login: function() {
  441. let _this = this;
  442. var isWeixin = 0;
  443. // #ifdef H5
  444. var ua = navigator.userAgent.toLowerCase();
  445. isWeixin = ua.indexOf('micromessenger') != -1;
  446. // #endif
  447. if(isWeixin){
  448. _this.$util.getmpuserinfo();
  449. }else{
  450. uni.reLaunch({
  451. url: "/pages/login/login?ptype=member&gotopage=/pagesA/my/userInfo/index",
  452. })
  453. }
  454. }
  455. },
  456. onPageScroll(e) {
  457. this.scrollTop = e.scrollTop;
  458. },
  459. onPullDownRefresh() {
  460. setTimeout(() => {
  461. uni.stopPullDownRefresh();
  462. }, 200);
  463. },
  464. onReachBottom: function() {}
  465. };
  466. </script>
  467. <style>
  468. .tui-header-box {
  469. width: 100%;
  470. padding: 0 30rpx 0 20rpx;
  471. box-sizing: border-box;
  472. position: fixed;
  473. top: 0;
  474. left: 0;
  475. display: flex;
  476. align-items: center;
  477. justify-content: flex-end;
  478. height: 32px;
  479. -webkit-transform: translateZ(0);
  480. transform: translateZ(0);
  481. z-index: 9999
  482. }
  483. .tui-set-box {
  484. width: 123rpx;
  485. display: flex;
  486. align-items: center;
  487. justify-content: space-between
  488. }
  489. .tui-icon-box {
  490. position: relative
  491. }
  492. .tui-icon-setup {
  493. margin-left: 8rpx;
  494. float: right
  495. }
  496. .tui-badge {
  497. position: absolute;
  498. font-size: 24rpx;
  499. height: 32rpx;
  500. min-width: 20rpx;
  501. padding: 0 6rpx;
  502. border-radius: 40rpx;
  503. right: 10rpx;
  504. top: -5rpx;
  505. -webkit-transform: scale(.8) translateX(60%);
  506. transform: scale(.8) translateX(60%);
  507. -webkit-transform-origin: center center;
  508. transform-origin: center center;
  509. display: flex;
  510. align-items: center;
  511. justify-content: center;
  512. z-index: 10
  513. }
  514. .tui-badge-red {
  515. background: #f74d54;
  516. color: #fff
  517. }
  518. .tui-badge-white {
  519. background: #fff;
  520. color: #f74d54
  521. }
  522. .tui-badge-dot {
  523. position: absolute;
  524. height: 12rpx;
  525. width: 12rpx;
  526. border-radius: 50%;
  527. right: -12rpx;
  528. top: 0;
  529. background: #f74d54
  530. }
  531. .tui-badgewhite-dot {
  532. position: absolute;
  533. height: 12rpx;
  534. width: 12rpx;
  535. border-radius: 50%;
  536. right: -12rpx;
  537. top: 0;
  538. background: #ebeea0
  539. }
  540. .tui-mybg-box {
  541. width: 100%;
  542. height: 464rpx;
  543. position: relative
  544. }
  545. .tui-my-bg {
  546. width: 100%;
  547. height: 464rpx;
  548. display: block
  549. }
  550. .tui-header-center {
  551. position: absolute;
  552. width: 100%;
  553. height: 128rpx;
  554. left: 0;
  555. top: 120rpx;
  556. padding: 0 30rpx;
  557. box-sizing: border-box;
  558. display: flex;
  559. align-items: center
  560. }
  561. .tui-avatar {
  562. flex-shrink: 0;
  563. width: 128rpx;
  564. height: 128rpx;
  565. border-radius: 50%;
  566. display: block
  567. }
  568. .tui-info {
  569. width: 60%;
  570. padding-left: 30rpx
  571. }
  572. .tui-login {
  573. width: 60%;
  574. padding-left: 30rpx;
  575. font-size: 32rpx;
  576. line-height: 32rpx;
  577. color: #fff;
  578. display: flex;
  579. align-items: center
  580. }
  581. .tui-nickname {
  582. font-size: 30rpx;
  583. font-weight: 500;
  584. color: #fff;
  585. display: flex;
  586. align-items: center
  587. }
  588. .tui-img-vip {
  589. width: 56rpx;
  590. height: 24rpx;
  591. margin-left: 18rpx
  592. }
  593. .tui-explain {
  594. width: 80%;
  595. font-size: 24rpx;
  596. font-weight: 400;
  597. color: #fff;
  598. opacity: .75;
  599. padding-top: 8rpx;
  600. white-space: nowrap;
  601. overflow: hidden;
  602. text-overflow: ellipsis
  603. }
  604. .tui-btn-edit {
  605. flex-shrink: 0;
  606. padding-right: 22rpx
  607. }
  608. .tui-header-btm {
  609. width: 100%;
  610. padding: 0 30rpx;
  611. box-sizing: border-box;
  612. position: absolute;
  613. left: 0;
  614. top: 260rpx;
  615. display: flex;
  616. align-items: center;
  617. justify-content: space-between;
  618. color: #fff
  619. }
  620. .tui-btm-item {
  621. flex: 1;
  622. display: flex;
  623. flex-direction: column;
  624. align-items: center;
  625. justify-content: center
  626. }
  627. .tui-btm-num {
  628. font-size: 32rpx;
  629. font-weight: 600;
  630. position: relative
  631. }
  632. .tui-btm-text {
  633. font-size: 24rpx;
  634. opacity: .85;
  635. padding-top: 4rpx
  636. }
  637. .tui-content-box {
  638. width: 100%;
  639. padding: 0 30rpx;
  640. box-sizing: border-box;
  641. position: relative;
  642. top: -100rpx;
  643. z-index: 10;
  644. padding-bottom: 100rpx
  645. }
  646. .tui-box {
  647. width: 100%;
  648. background: #fff;
  649. box-shadow: 0 3rpx 20rpx hsla(0, 0%, 71.8%, .1);
  650. border-radius: 30rpx;
  651. overflow: hidden
  652. }
  653. .vip-box {
  654. width: 100%;
  655. box-shadow: 0 3rpx 20rpx hsla(0, 0%, 71.8%, .1);
  656. border-radius: 30rpx;
  657. overflow: hidden
  658. }
  659. .vip-box-header {
  660. width: 100%;
  661. height: 118rpx;
  662. padding: 0 26rpx;
  663. box-sizing: border-box;
  664. display: flex;
  665. align-items: center;
  666. justify-content: space-between
  667. }
  668. .vip-box-title {
  669. font-size: 30rpx;
  670. line-height: 30rpx;
  671. font-weight: 600;
  672. color: #f5e3b1
  673. }
  674. .vip-box-but {
  675. color: #503f35;
  676. font-size: 30rpx;
  677. background-color: #f8e6c0;
  678. height: 60rpx;
  679. line-height: 60rpx;
  680. border-radius: 30rpx
  681. }
  682. .tui-order-box {
  683. height: 208rpx
  684. }
  685. .tui-cell-header {
  686. width: 100%;
  687. height: 74rpx;
  688. padding: 0 26rpx;
  689. box-sizing: border-box;
  690. display: flex;
  691. align-items: center;
  692. justify-content: space-between
  693. }
  694. .tui-cell-title {
  695. font-size: 30rpx;
  696. line-height: 30rpx;
  697. font-weight: 600;
  698. color: #333
  699. }
  700. .tui-cell-sub {
  701. font-size: 26rpx;
  702. font-weight: 400;
  703. color: #999;
  704. padding-right: 28rpx
  705. }
  706. .tui-order-list {
  707. width: 100%;
  708. height: 134rpx;
  709. padding: 0 30rpx;
  710. box-sizing: border-box;
  711. display: flex;
  712. align-items: center;
  713. justify-content: space-between
  714. }
  715. .tui-order-item {
  716. flex: 1;
  717. display: flex;
  718. float: left;
  719. flex-direction: column;
  720. align-items: center
  721. }
  722. .tui-order-text,
  723. .tui-tool-text {
  724. font-size: 26rpx;
  725. font-weight: 400;
  726. color: #666;
  727. padding-top: 4rpx
  728. }
  729. .tui-tool-text {
  730. font-size: 25rpx;
  731. line-height: 25rpx
  732. }
  733. .tui-order-icon {
  734. width: 70rpx;
  735. height: 70rpx;
  736. display: block
  737. }
  738. .tui-assets-box {
  739. height: 118rpx;
  740. margin-top: 20rpx;
  741. padding-top: 30rpx
  742. }
  743. .tui-assets-list {
  744. height: 84rpx
  745. }
  746. .tui-assets-num {
  747. font-size: 38rpx;
  748. font-weight: 500;
  749. color: #333;
  750. font-weight: 700;
  751. position: relative
  752. }
  753. .tui-assets-text {
  754. font-size: 24rpx;
  755. font-weight: 400;
  756. color: #666;
  757. padding-top: 6rpx
  758. }
  759. .tui-tool-box {
  760. margin-top: 20rpx
  761. }
  762. .tui-flex-wrap {
  763. flex-wrap: wrap;
  764. height: auto
  765. }
  766. .tui-tool-list {
  767. width: 100%;
  768. padding-top: 15rpx;
  769. padding-bottom: 20rpx;
  770. padding-left: 20rpx;
  771. padding-right: 20rpx;
  772. box-sizing: border-box;
  773. display: flex;
  774. align-items: center
  775. }
  776. .tui-tool-item {
  777. width: 25%;
  778. display: flex;
  779. align-items: center;
  780. justify-content: center;
  781. flex-direction: column;
  782. padding-top: 15rpx;
  783. padding-bottom: 15rpx;
  784. background-color: #fff
  785. }
  786. .tui-tool-icon {
  787. width: 64rpx;
  788. height: 64rpx;
  789. display: block
  790. }
  791. .tui-tool-liicon {
  792. width: 50rpx;
  793. height: 50rpx;
  794. display: block
  795. }
  796. .tui-badge-icon {
  797. width: 66rpx;
  798. height: 30rpx;
  799. position: absolute;
  800. right: 0;
  801. -webkit-transform: translateX(88%);
  802. transform: translateX(88%);
  803. top: -15rpx
  804. }
  805. .tui-product-list {
  806. display: flex;
  807. justify-content: space-between;
  808. flex-direction: row;
  809. flex-wrap: wrap;
  810. box-sizing: border-box
  811. }
  812. .tui-product-container {
  813. width: 100%;
  814. display: flex;
  815. flex-direction: row;
  816. flex-wrap: wrap
  817. }
  818. .tui-pro-item {
  819. background: #fff;
  820. box-sizing: border-box;
  821. overflow: hidden;
  822. border-radius: 12rpx;
  823. width: 48%;
  824. margin-left: 1%;
  825. margin-right: 1%;
  826. margin-bottom: 2%
  827. }
  828. .tui-pro-img {
  829. width: 100%;
  830. display: block
  831. }
  832. .tui-pro-content {
  833. display: flex;
  834. flex-direction: column;
  835. justify-content: space-between;
  836. box-sizing: border-box;
  837. padding: 20rpx
  838. }
  839. .tui-pro-tit {
  840. color: #2e2e2e;
  841. font-size: 26rpx;
  842. word-break: break-all;
  843. overflow: hidden;
  844. text-overflow: ellipsis;
  845. display: -webkit-box;
  846. -webkit-box-orient: vertical;
  847. -webkit-line-clamp: 2
  848. }
  849. .tui-pro-price {
  850. padding-top: 18rpx
  851. }
  852. .tui-sale-price {
  853. font-size: 34rpx;
  854. font-weight: 500;
  855. color: #e41f19
  856. }
  857. .tui-factory-price {
  858. font-size: 24rpx;
  859. color: #a0a0a0;
  860. text-decoration: line-through;
  861. padding-left: 12rpx
  862. }
  863. .tui-pro-pay {
  864. padding-top: 10rpx;
  865. font-size: 24rpx;
  866. color: #656565
  867. }
  868. .tui-item-box {
  869. width: 100%;
  870. display: flex;
  871. align-items: center
  872. }
  873. .tui-list-cell_name {
  874. padding-left: 20rpx;
  875. display: flex;
  876. align-items: center;
  877. justify-content: center
  878. }
  879. </style>