exchangePrize.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784
  1. <template>
  2. <view class="exchangePrize">
  3. <!-- 表单 -->
  4. <view class="form">
  5. <uni-forms :modelValue="formData">
  6. <view style="margin-bottom: 24rpx;" class="tab_nav" v-if="isPhy == 1">
  7. <view class="navTitle" v-for="(item,index) in typeSelect" :key="index"
  8. @click="checked(index,item.id)">
  9. <view :class="{'active':isActive === index}">
  10. {{item.name}}
  11. </view>
  12. </view>
  13. </view>
  14. <uni-forms-item name="name" v-if="formData.type!=''||isVerification==true">
  15. <uni-easyinput type="text" v-model="Data.receiver" placeholder="联系人" />
  16. </uni-forms-item>
  17. <uni-forms-item name="phone" v-if="formData.type!=''||isVerification==true">
  18. <uni-easyinput type="number" v-model="Data.phone" placeholderStyle='color:#333,font-size:32rpx'
  19. placeholder="联系电话" maxlength=11 />
  20. </uni-forms-item>
  21. <uni-forms-item name="region" v-if="formData.type=='快递配送'">
  22. <pickerAddress @change="change">
  23. <!-- <uni-easyinput type="text" v-model="formData.region" placeholder="所在地区" /> -->
  24. <view class="selectType">
  25. <view class="uni-input">
  26. <text v-if="formData.region==''||formData.region==null"
  27. style="color: #999999 ; font-size: 30rpx; ">所在地区</text>
  28. <text style="font-size: 30rpx;" v-if="Data.area_id!=''">{{formData.region}}</text>
  29. </view>
  30. <image src="/static/icon/right.png"
  31. style="width: 14rpx;height: 24rpx;position: absolute;top:22rpx;right: 30rpx;">
  32. </image>
  33. </view>
  34. </pickerAddress>
  35. </uni-forms-item>
  36. <uni-forms-item name="region" v-if="formData.type=='快递配送'">
  37. <textarea placeholder-style="#999" class="text-area" type="text" placeholder="详细地址"
  38. v-model="Data.address" />
  39. </uni-forms-item>
  40. <uni-forms-item name="region" v-if="formData.type=='门店自提'||isVerification==true">
  41. <view class="selectType" @click="openShop" v-if="hotelList.length != 0 " >
  42. <view class="uni-input">
  43. <text v-if="formData.shop==''||formData.shop==null"
  44. style="color: #999999 ; font-size: 30rpx; ">请选择门店</text>
  45. <text style="font-size: 30rpx;" v-if="formData.shop!=''">{{formData.shop}}</text>
  46. <text class="distance" v-if="formData.shop!=''">{{formData.distanceToMe}}km</text>
  47. </view>
  48. <image src="/static/icon/right.png"
  49. style="width: 14rpx;height: 24rpx;position: absolute;top:22rpx;right: 30rpx;">
  50. </image>
  51. </view>
  52. <view class="selectTypeNone" v-if="hotelList.length == 0 ">
  53. 暂无门店,请选择其他配送方式
  54. </view>
  55. </uni-forms-item>
  56. </uni-forms>
  57. </view>
  58. <!-- 奖品信息 -->
  59. <view class="msg">
  60. <view class="title">
  61. <text>奖品信息</text>
  62. </view>
  63. <view class="shopCard">
  64. <image :src="coverImg"></image>
  65. <view style="margin-left: 24rpx;">
  66. <text class="name">{{prizeDetail[0].name}}</text>
  67. <!-- <text class="tag">礼盒装 </text> -->
  68. </view>
  69. </view>
  70. <view class="shopNumber">
  71. <text>件数</text>
  72. <text>1件</text>
  73. </view>
  74. <view style="width: 694rpx;height: 2rpx;border: 2rpx dashed #F2F2F2;margin-top: 38rpx;"></view>
  75. <view class="shopRemark">
  76. <view class="shopRemark-title">
  77. <text>奖品说明</text>
  78. </view>
  79. <view class="shopRemark-content">
  80. <u-parse :content="prizeDetail[0].details"></u-parse>
  81. </view>
  82. </view>
  83. <!-- 占位 -->
  84. <view style="height: 158rpx;"></view>
  85. </view>
  86. <!-- 兑换按钮 -->
  87. <view class="bottombtn" @click="goExDetail">
  88. <view class="btnitem">
  89. <text>确认兑换</text>
  90. </view>
  91. </view>
  92. <!-- 配送方式-->
  93. <!-- <uni-popup ref="Recipient" type="bottom" mask-background-color=" rgba(0,0,0,0.7);">
  94. <view class="pop">
  95. <view class="popuptitle">
  96. <view @click="cancelBtn" style="width: 68rpx;color: #999;font-size: 32rpx;">
  97. <text>取消</text>
  98. </view>
  99. <view>
  100. <text style="font-weight: bold; font-size: 32rpx; color: #080F18; ">配送方式</text>
  101. </view>
  102. <view @click="sureBtn" style="width: 68rpx;"><text
  103. style="font-size: 32rpx; color: #FF6200;line-height: 34rpx">确定</text></view>
  104. </view>
  105. <view class="chooselag">
  106. <view @click="companyed(item.name,index)" class="language" v-for="(item,index) in typeSelect "
  107. :key="index" :class="[activeIndex === index?'sgActive': ''] ">
  108. <text>{{item.name}}</text>
  109. </view>
  110. </view>
  111. </view>
  112. </uni-popup> -->
  113. <!-- 门店选择-->
  114. <uni-popup ref="shopSelected" type="bottom" mask-background-color=" rgba(0,0,0,0.7);">
  115. <view class="pop">
  116. <view class="popuptitle">
  117. <view @click="cancelShopBtn" style="width: 68rpx;color: #999;font-size: 32rpx;">
  118. <text>取消</text>
  119. </view>
  120. <view>
  121. <text style="font-weight: bold; font-size: 32rpx; color: #080F18; ">配送方式</text>
  122. </view>
  123. <view @click="sureShopBtn" style="width: 68rpx;"><text
  124. style="font-size: 32rpx; color: #FF6200;line-height: 34rpx">确定</text></view>
  125. </view>
  126. <view class="chooselag">
  127. <view @click="companyedShop(item.name,item.id,item.distanceToMe,index)" class="language"
  128. v-for="(item,index) in hotelList" :key="index"
  129. :class="[activeIndex2 === index?'sgActive': ''] ">
  130. <text>{{item.name}}</text>
  131. </view>
  132. </view>
  133. </view>
  134. </uni-popup>
  135. </view>
  136. </template>
  137. <script>
  138. import pickerAddress from '@/uni_modules/hu-pickerAddress/hu-pickerAddress.vue'
  139. export default {
  140. components: {
  141. pickerAddress
  142. },
  143. data() {
  144. return {
  145. //经纬度
  146. latitude: '',
  147. longitude: '',
  148. //实物奖品和线下奖品区分
  149. isPhy: '',
  150. activeIndex: '',
  151. activeIndex2: '',
  152. coverImg: '',
  153. prizeDetail: '',
  154. //产品
  155. id: '',
  156. // 是否核销
  157. isVerification: false,
  158. // 表单数据
  159. formData: {
  160. type: '',
  161. region: '',
  162. shop: '',
  163. distanceToMe: ''
  164. },
  165. //激活指定table菜单
  166. isActive: 0,
  167. // 配送方式
  168. typeSelect: [{
  169. name: '快递配送',
  170. }, {
  171. name: '门店自提',
  172. }],
  173. // 选择门店
  174. hotelList: [],
  175. // 表单数据
  176. Data: {
  177. //奖品id
  178. product_id: '',
  179. order_id: '', //订单id
  180. // 快递类型(1.快递发货 2.到店自提也是线下核销)
  181. express_type: '',
  182. // 收货人
  183. receiver: "",
  184. // 联系电话
  185. phone: '',
  186. // 地址ID,最小行政单位地区ID,express_type=1时必传
  187. area_id: '',
  188. // 详细地址,express_type=1时必传
  189. address: '',
  190. //门店ID,express_type=2时必传
  191. hotel_id: 0,
  192. },
  193. }
  194. },
  195. async onLoad(o) {
  196. if (o.id) {
  197. this.id = o.id
  198. this.product_id = o.product_id
  199. console.log(this.id,'---->订单id');
  200. this.isPhy = o.isPhy
  201. if (this.isPhy == 1) {
  202. //实物奖品
  203. await this.init(this.product_id)
  204. await this.getPrizeList(0)
  205. } else {
  206. //虚拟奖品
  207. await this.init(this.product_id)
  208. await this.getPrizeList(1)
  209. }
  210. }
  211. uni.$on('refreshPrizeData', () => {
  212. console.log('asdasdasdasdsadsad')
  213. })
  214. },
  215. methods: {
  216. //初始化
  217. async init(id) {
  218. await this.goLocation();
  219. await this.getHotel(id);
  220. },
  221. //菜单index切换
  222. async checked(index, id) {
  223. this.isActive = index
  224. if (this.isActive == 0) {
  225. this.formData.type = '快递配送'
  226. this.Data.express_type = 1
  227. } else {
  228. this.formData.type = '门店自提'
  229. this.Data.express_type = 2
  230. await this.goLocation()
  231. await this.getHotel(this.product_id)
  232. }
  233. },
  234. space(lat1, lng1, lat2, lng2) {
  235. var radLat1 = lat1 * Math.PI / 180.0;
  236. var radLat2 = lat2 * Math.PI / 180.0;
  237. var a = radLat1 - radLat2;
  238. var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
  239. var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
  240. Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
  241. s = s * 6378.137;
  242. s = Math.round(s * 10000) / 10000;
  243. return s // 单位千米
  244. },
  245. //门店列表
  246. getHotel(id) {
  247. this.$api.hotel.getHotelList({
  248. page: 1,
  249. type: 2,
  250. latitude: this.latitude,
  251. longitude: this.longitude,
  252. product_id: id
  253. }).then(res => {
  254. this.hotelList = res.data.data.map(item => {
  255. item.distanceToMe = this.space(this.latitude, this.longitude, item.latitude, item
  256. .longitude).toFixed(1);
  257. return item;
  258. })
  259. console.log(this.hotelList, '-------->this.hotelList');
  260. //最近的酒店
  261. this.formData.shop = this.hotelList[0].name
  262. this.formData.distanceToMe = this.hotelList[0].distanceToMe
  263. this.Data.hotel_id = this.hotelList[0].id
  264. })
  265. },
  266. //获取定位
  267. goLocation() {
  268. let _this = this
  269. uni.getLocation({
  270. type: "gcj02", //返回可以用于wx.openLocation的经纬度
  271. success: function(res) {
  272. _this.latitude = res.latitude
  273. _this.longitude = res.longitude
  274. },
  275. fail: function(res) {
  276. console.log(res)
  277. }
  278. })
  279. },
  280. //订单兑换
  281. goExDetail() {
  282. if (this.formData.type == '' && this.isPhy == 1) {
  283. uni.showToast({
  284. icon: 'none',
  285. title: '请选择配送方式'
  286. })
  287. return
  288. }
  289. if (this.Data.receiver == '') {
  290. uni.showToast({
  291. icon: 'none',
  292. title: '请填写联系人'
  293. })
  294. return
  295. }
  296. if (this.Data.phone == '') {
  297. uni.showToast({
  298. icon: 'none',
  299. title: '请填写联系电话'
  300. })
  301. return
  302. }
  303. if (this.formData.region == '' && this.Data.express_type == 1) {
  304. uni.showToast({
  305. icon: 'none',
  306. title: '请填写所在地区'
  307. })
  308. return
  309. }
  310. if (this.Data.address == '' && this.Data.express_type == 1) {
  311. uni.showToast({
  312. icon: 'none',
  313. title: '请填写详细地址'
  314. })
  315. return
  316. }
  317. if (this.Data.hotel_id == '' && this.Data.express_type == 2) {
  318. uni.showToast({
  319. icon: 'none',
  320. title: '请选择门店'
  321. })
  322. return
  323. }
  324. if (this.isPhy == 1) {
  325. if (this.Data.express_type == 1) {
  326. this.$api.product.orderExchange({
  327. ...this.Data
  328. }).then(res => {
  329. if (res.code == 0) {
  330. uni.navigateTo({
  331. url: `/pages/my/prize/exchangeDetail?productType=2`
  332. })
  333. } else {
  334. uni.showToast({
  335. icon: 'none',
  336. title: res.msg
  337. })
  338. }
  339. })
  340. } else {
  341. let obj = {}
  342. obj.express_type = this.Data.express_type
  343. obj.order_id = this.Data.order_id
  344. obj.receiver = this.Data.receiver
  345. obj.phone = this.Data.phone
  346. obj.hotel_id = this.Data.hotel_id
  347. this.$api.product.orderExchange({
  348. ...obj
  349. }).then(res => {
  350. if (res.code == 0) {
  351. uni.navigateTo({
  352. url: `/pages/my/prize/exchangeDetail?productType=2`
  353. })
  354. } else {
  355. uni.showToast({
  356. icon: 'none',
  357. title: res.msg
  358. })
  359. }
  360. })
  361. }
  362. } else {
  363. let obj = {}
  364. obj.express_type = this.Data.express_type
  365. obj.order_id = this.Data.order_id
  366. obj.receiver = this.Data.receiver
  367. obj.phone = this.Data.phone
  368. obj.hotel_id = this.Data.hotel_id
  369. this.$api.product.orderExchange({
  370. ...obj
  371. }).then(res => {
  372. if (res.code == 0) {
  373. uni.navigateTo({
  374. url: `/pages/my/prize/exchangeDetail?productType=2`
  375. })
  376. } else {
  377. uni.showToast({
  378. icon: 'none',
  379. title: res.msg
  380. })
  381. }
  382. })
  383. }
  384. },
  385. //打开门店弹框
  386. openShop() {
  387. this.$refs.shopSelected.open('bottom')
  388. },
  389. companyedShop(i, id, distance, index) {
  390. this.typestatus2 = i
  391. this.activeIndex2 = index
  392. this.distanceToMe1 = distance
  393. this.Data.hotel_id = id
  394. },
  395. //确定按钮
  396. sureShopBtn() {
  397. if (this.typestatus2 == undefined) {
  398. uni.showToast({
  399. icon: "none",
  400. title: '请选择门店'
  401. })
  402. } else {
  403. this.formData.shop = this.typestatus2
  404. this.formData.distanceToMe = this.distanceToMe1
  405. this.$refs.shopSelected.close()
  406. }
  407. },
  408. //取消按钮
  409. cancelShopBtn() {
  410. this.$refs.shopSelected.close()
  411. },
  412. change(ret) {
  413. this.formData.region = ret.data.join('-')
  414. this.Data.area_id = ret.code[2]
  415. },
  416. //取消按钮
  417. cancelBtn() {
  418. this.$refs.Recipient.close()
  419. },
  420. //选择配送方式
  421. companyed(i, index) {
  422. this.typestatus1 = i
  423. this.activeIndex = index
  424. console.log(i, this.activeIndex)
  425. if (index == 0) {
  426. this.Data.express_type = 1
  427. } else if (index == 1) {
  428. this.Data.express_type = 2
  429. this.goLocation()
  430. setTimeout(() => {
  431. this.getHotel(this.product_id)
  432. }, 1000)
  433. }
  434. },
  435. //确定按钮
  436. sureBtn() {
  437. if (this.typestatus1 == undefined) {
  438. uni.showToast({
  439. icon: "none",
  440. title: '请选择配送方式'
  441. })
  442. } else {
  443. this.formData.type = this.typestatus1
  444. this.$refs.Recipient.close()
  445. }
  446. },
  447. // 打开配送弹框
  448. openSelect() {
  449. this.$refs.Recipient.open('bottom')
  450. },
  451. // 获取奖品列表
  452. getPrizeList(type) {
  453. this.$api.lottery.getDrawRecord({
  454. is_virtual: type,
  455. page: 0
  456. }).then(res => {
  457. this.prizeDetail = res.data.data.filter(item => {
  458. return item.id == this.id
  459. })
  460. this.coverImg = this.prizeDetail[0].img_urls
  461. this.Data.order_id = this.prizeDetail[0].order_id
  462. this.Data.product_id = this.prizeDetail[0].product_id
  463. this.product_id = this.Data.product_id
  464. console.log(this.product_id, '----->this.product_id');
  465. this.init(this.product_id)
  466. if (this.isPhy == 2) {
  467. this.isVerification = true
  468. this.Data.express_type = 2
  469. this.goLocation()
  470. setTimeout(() => {
  471. this.getHotel(this.product_id)
  472. }, 500)
  473. }else if(this.isPhy == 1 ){
  474. this.formData.type = '快递配送'
  475. this.Data.express_type = 1
  476. }
  477. })
  478. },
  479. }
  480. }
  481. </script>
  482. <style lang="scss" scoped>
  483. $pageColor:#F9F9F9;
  484. $bgColor:#FFFFFF;
  485. @mixin flexlayout {
  486. display: flex;
  487. align-items: center;
  488. justify-content: center;
  489. }
  490. .exchangePrize {
  491. height: 100%;
  492. background: $bgColor;
  493. }
  494. .distance {
  495. position: absolute;
  496. right: 60rpx;
  497. top: 15rpx;
  498. }
  499. ::v-deep .uni-forms-item {
  500. margin-bottom: 24rpx;
  501. }
  502. ::v-deep .uni-forms-item__content {
  503. font-size: 30rpx;
  504. border: 2rpx solid #EAEAEA;
  505. padding: 18rpx 0;
  506. border-radius: 8rpx;
  507. background-color: #fff;
  508. }
  509. ::v-deep .is-input-border {
  510. border: none;
  511. }
  512. //奖品备注
  513. .shopRemark{
  514. margin-top: 30rpx;
  515. margin-bottom: 66rpx;
  516. padding: 30rpx 24rpx 26rpx;
  517. background: #F4F5F6;
  518. border-radius: 12rpx;
  519. .shopRemark-title{
  520. font-size: 30rpx;
  521. font-weight: bold;
  522. color: #333333;
  523. }
  524. .shopRemark-content{
  525. margin-top: 20rpx;
  526. font-size: 24rpx;
  527. font-weight: bold;
  528. color: #666666;
  529. }
  530. }
  531. .form {
  532. background: $pageColor;
  533. width: 750rpx;
  534. padding: 24rpx 30rpx 12rpx 30rpx;
  535. box-sizing: border-box;
  536. .selectType {
  537. width: 690rpx;
  538. height: 68rpx;
  539. background: #FFFFFF;
  540. display: flex;
  541. align-items: center;
  542. padding-left: 20rpx;
  543. box-sizing: border-box;
  544. position: relative;
  545. }
  546. .selectTypeNone{
  547. color: #df6220;
  548. padding-left: 20rpx;
  549. }
  550. }
  551. .msg {
  552. width: 750rpx;
  553. height: 700rpx;
  554. background: $bgColor;
  555. border-radius: 12rpx 12rpx 0px 0px;
  556. padding: 32rpx 30rpx;
  557. .title {
  558. margin-bottom: 24rpx;
  559. text {
  560. font-size: 32rpx;
  561. font-family: PingFang-SC-Bold, PingFang-SC;
  562. font-weight: bold;
  563. color: #080F18;
  564. }
  565. }
  566. .shopCard {
  567. margin-top: 28rpx;
  568. width: 694rpx;
  569. height: 164rpx;
  570. background: #F4F5F6;
  571. border-radius: 10rpx;
  572. display: flex;
  573. align-items: center;
  574. image {
  575. width: 132rpx;
  576. height: 132rpx;
  577. margin-left: 16rpx;
  578. display: inline-block;
  579. border-radius: 10rpx;
  580. }
  581. .name {
  582. font-size: 28rpx;
  583. font-family: PingFangSC-Medium, PingFang SC;
  584. font-weight: 500;
  585. color: #080F18;
  586. display: block;
  587. }
  588. .tag {
  589. font-size: 24rpx;
  590. font-family: PingFang-SC-Medium, PingFang-SC;
  591. font-weight: 500;
  592. color: #666666;
  593. }
  594. }
  595. .shopNumber {
  596. display: flex;
  597. justify-content: space-between;
  598. align-items: center;
  599. margin-top: 25rpx;
  600. text {
  601. font-size: 26rpx;
  602. font-family: PingFang-SC-Medium, PingFang-SC;
  603. font-weight: 500;
  604. color: #000000;
  605. }
  606. }
  607. }
  608. .bottombtn {
  609. width: 690rpx;
  610. height: 92rpx;
  611. background: linear-gradient(270deg, #FF6200 0%, #FF9342 100%);
  612. border-radius: 12rpx;
  613. margin-left: 30rpx;
  614. position: fixed;
  615. bottom: 72rpx;
  616. @include flexlayout();
  617. .btnitem {
  618. @include flexlayout();
  619. text {
  620. font-size: 30rpx;
  621. font-family: PingFang-SC-Bold, PingFang-SC;
  622. font-weight: bold;
  623. color: $bgColor;
  624. }
  625. }
  626. }
  627. .pop {
  628. width: 100%;
  629. height: 616rpx;
  630. background: #FFFFFF;
  631. border-radius: 16rpx 16rpx 0 0;
  632. overflow: scroll;
  633. .popuptitle {
  634. position: fixed;
  635. top: 0;
  636. display: flex;
  637. width: 100%;
  638. padding: 0 30rpx;
  639. height: 122rpx;
  640. background: #fff;
  641. display: flex;
  642. align-items: center;
  643. justify-content: space-between;
  644. image {
  645. display: inline-block;
  646. width: 33rpx;
  647. height: 33rpx;
  648. border-radius: 1rpx;
  649. }
  650. }
  651. .chooselag {
  652. flex-direction: column;
  653. justify-content: center;
  654. align-items: center;
  655. background: #FFFFFF;
  656. padding: 0 30rpx;
  657. overflow-y: scroll;
  658. margin-top: 122rpx;
  659. .language {
  660. width: 100%;
  661. font-size: 32rpx;
  662. font-weight: 400;
  663. color: #777777;
  664. border-bottom: 1rpx #E2E4EA solid;
  665. display: flex;
  666. align-items: center;
  667. justify-content: center;
  668. padding-top: 40rpx;
  669. padding-bottom: 40rpx;
  670. }
  671. .sgActive {
  672. color: #FF6200 !important;
  673. font-weight: bold !important;
  674. }
  675. }
  676. }
  677. .text-area {
  678. width: 100%;
  679. height: 130rpx;
  680. padding: 0rpx 20rpx;
  681. background: #FFFFFF;
  682. border-radius: 8rpx;
  683. font-size: 30rpx;
  684. color: #000;
  685. line-height: 30rpx;
  686. }
  687. ::v-deep .uni-icons {
  688. color: #c0c4cc !important;
  689. font-size: 24px !important;
  690. }
  691. ::v-deep .uni-easyinput__content-input {
  692. color: #333333;
  693. font-size: 30rpx;
  694. }
  695. ::v-deep .uni-easyinput__placeholder-class {
  696. color: #999 !important;
  697. font-size: 30rpx !important;
  698. }
  699. //菜单切换
  700. .tab_nav {
  701. width: 100%;
  702. display: flex;
  703. justify-content: space-between;
  704. align-items: center;
  705. }
  706. .tab_nav .navTitle {
  707. flex: none;
  708. width: 336rpx;
  709. height: 88rpx;
  710. font-size: 30rpx;
  711. background: #E8E8E8;
  712. color: #333;
  713. border-radius: 12rpx;
  714. display: flex;
  715. align-items: center;
  716. justify-content: center;
  717. }
  718. .active {
  719. width: 336rpx;
  720. height: 88rpx;
  721. border-radius: 12rpx;
  722. display: flex;
  723. align-items: center;
  724. justify-content: center;
  725. background: linear-gradient(90deg, #FF9342 0%, #FF6200 100%);
  726. color: #fff;
  727. }
  728. </style>