product.vue 35 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379
  1. <template>
  2. <view class="product" :style="{paddingBottom: userIdentity==1 ? '0rpx' :'188rpx'}">
  3. <custom-p v-if="isHeaderPoduct"
  4. :systeminfo='systeminfo'
  5. :navbar-data='nvabarData'
  6. :headerBtnPosi ="headerBtnPosi"
  7. :headerColor="headerColor"
  8. :type="isShareType"
  9. :page='backPage'>
  10. </custom-p>
  11. <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading ="true" :loadingType="5"></tui-skeleton>
  12. <view class="container-product tui-skeleton">
  13. <view class="product-top">
  14. <view class="banner-section">
  15. <uni-swiper-dot :info="productImage" :current="current" field="content" :mode="mode" >
  16. <swiper class="banner tui-banner tui-skeleton-rect" circular @change="swiperChange" :duration='800' :autoplay="false" :circular="false" >
  17. <swiper-item v-for="(item, index) in productImage" :key="index" class="banner-item">
  18. <image :src="item" @click="previewImg(index)" class="product-img" />
  19. </swiper-item>
  20. </swiper>
  21. <view class="swiper__dots-box">
  22. <view v-for="(item,idx) in productImage"
  23. :key="idx"
  24. :class="[idx===current?'swiper__dots-long':'none']"
  25. :data-index="current" class="swiper__dots-item">
  26. </view>
  27. </view>
  28. </uni-swiper-dot>
  29. </view>
  30. <view class="product-wrap clearfix">
  31. <view class="wrap-top" :class="goodsData.isNoneDisabled ? 'none' : ''">
  32. <view class="p-title tui-skeleton-fillet">
  33. {{product.name == undefined ? '' : product.name}}
  34. </view>
  35. <view class="productRemarks" v-if="product.productRemarks!=''&&product.productRemarks!=null">
  36. <view class="">{{product.productRemarks}}</view>
  37. </view>
  38. <view class="wrap-top-price" v-if="!goodsData.isNoneDisabled">
  39. <view v-if="!hasLogin" class="p-login grade tui-skeleton-fillet">
  40. <text class="p-no">价格:</text>
  41. <uni-stars :stars="parseInt(product.price1Grade)" :font-size='36' :width-info="180"></uni-stars>
  42. <view class="p-login tui-skeleton-fillet">
  43. <text class="p-login-btn" @click.stop="navToLogin">登录查看价格<text class="iconfont icon-xiayibu" style="font-size: 22rpx;margin: 0 6rpx;"></text></text>
  44. </view>
  45. </view>
  46. <view class="cm-price" v-else>
  47. <cm-price v-if="isRequest"
  48. :product="product"
  49. :userIdentity="userIdentity"
  50. :ladderPriceList="ladderPriceList"
  51. :retailPrice="retailPrice"
  52. :smallMoney="smallMoney"
  53. :minBuyNumber="minBuyNumber"/>
  54. </view>
  55. </view>
  56. </view>
  57. <view class="attributes">
  58. <cm-attributes v-if="isRequest" :product="product" :goodsData="goodsData" />
  59. </view>
  60. </view>
  61. </view>
  62. <view class="product-supplier" @click="goSupplier">
  63. <text class="title">供应商信息</text>
  64. <text class="name">{{shop.name}}</text>
  65. <text class="iconfont icon-xiayibu"></text>
  66. </view>
  67. <view class="product-details">
  68. <!-- 头部 -->
  69. <view v-if="goodsData.isNoneDisabled" class="navbar" :class="navbarFiexd" :style="{top:headerBtnPosi.bottom + (headerBtnPosi.bottom - headerBtnPosi.height - systeminfo.statusBarHeight) +'px'}">
  70. <view class="nav-item tui-skeleton-fillet" v-for="(item,index) in disabledTabNavList" :key="index" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index+2)">
  71. <text class="line"></text>
  72. <text>{{item.name}}</text>
  73. </view>
  74. </view>
  75. <view v-else class="navbar" :class="navbarFiexd" :style="{top:headerBtnPosi.bottom + (headerBtnPosi.bottom - headerBtnPosi.height - systeminfo.statusBarHeight) +'px'}">
  76. <view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 0 }" @click="tabClick(0)">
  77. <text>商品详情</text>
  78. <text class="line"></text>
  79. </view>
  80. <view class="nav-item tui-skeleton-fillet"
  81. :class="{ current: tabCurrentIndex === 1 }"
  82. @click="tabClick(1)"
  83. v-if="product.parametersList != ''">
  84. <text>相关参数</text>
  85. <text class="line"></text>
  86. </view>
  87. <view class="nav-item tui-skeleton-fillet"
  88. :class="{ current: tabCurrentIndex === 2 }"
  89. @click="tabClick(2)"
  90. v-if="product.productDetail.orderInfo || product.productDetail.serviceInfo">
  91. <text>服务项目</text>
  92. <text class="line"></text>
  93. </view>
  94. <view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 3 }" @click="tabClick(3)">
  95. <text>相关推荐</text>
  96. <text class="line"></text>
  97. </view>
  98. </view>
  99. <!-- 商品详情,相关参数,服务项目,相关推荐-->
  100. <view class="content tui-banner tui-skeleton-rect" v-if="tabCurrentIndex === 0">
  101. <parser :html="html" :img-mode="widthFix"></parser>
  102. </view>
  103. <view class="content param" v-if="tabCurrentIndex === 1">
  104. <cm-parameter :product="product" v-if="isRarameter"></cm-parameter>
  105. </view>
  106. <view class="content service" v-if="tabCurrentIndex === 2">
  107. <cm-service :product="product.productDetail" v-if="isService"></cm-service>
  108. </view>
  109. <view class="content hot" v-if="tabCurrentIndex === 3">
  110. <recommend :query-productid="product.productID" v-if="isRecommend"></recommend>
  111. </view>
  112. </view>
  113. <!-- 底部按钮 -->
  114. <view class="menu" v-if="userIdentity!=1">
  115. <view class="bottom-btn" :style="{paddingBottom :isIphoneX ? '68rpx' : '0rpx'}">
  116. <view class="bottom-le">
  117. <view class="item-bt" @click="this.$api.switchTabTo('/pages/tabBar/home/home')">
  118. <image src="../../static/icon-home-active@3x.png"></image>
  119. <text>首页</text>
  120. </view>
  121. <view class="item-bt">
  122. <!-- #ifdef MP-WEIXIN -->
  123. <button class="contact-btn" open-type="contact" @bindcontact="handleContact">
  124. <image src="../../static/severs@3x.png"></image>
  125. <text>客服</text>
  126. </button>
  127. <!-- #endif -->
  128. </view>
  129. <view class="item-bt" @click="buyProductCart()">
  130. <image src="../../static/icon-cart-active@3x.png"></image>
  131. <text>购物车</text>
  132. <text v-if="hasLogin && goodsData.cartCount>0"
  133. class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
  134. :class="[goodsData.cartCount < 10 ? 'goleft':'']">
  135. {{ goodsData.cartCount >= 100 ? '99+': goodsData.cartCount}}
  136. </text>
  137. <view class="animation-num" :class="isAnimation ? 'animation' : 'restion'">+1</view>
  138. </view>
  139. </view>
  140. <view class="bottom-ri">
  141. <button
  142. :disabled="goodsData.disabled"
  143. class="btn btn-cart"
  144. :class="[goodsData.disabled ? 'disabled':'']"
  145. @tap.stop="btnGetConfirm('add')">加入购物车</button>
  146. <button
  147. :disabled="goodsData.disabled"
  148. class="btn btn-bay"
  149. :class="[goodsData.disabled ? 'disabled':'']"
  150. @tap.stop="btnGetConfirm('buy')">立即购买</button>
  151. </view>
  152. </view>
  153. </view>
  154. <!--底部选择模态层弹窗组件 -->
  155. <view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="hideSpec">
  156. <!-- 遮罩层 -->
  157. <view class="mask"></view>
  158. <view class="layer" @tap.stop="discard" :style="{paddingBottom :isIphoneX ? '68rpx' : '36rpx',bottom:isIphoneX ?'-352rpx' : '-296rpx'}">
  159. <view class="content">
  160. <view class="layer-smimg">
  161. <image :src="product.mainImage" mode=""></image>
  162. </view>
  163. <view class="layer-nunbox">
  164. <view class="layer-nunbox-t" v-if="product.step === 2">
  165. <view class="text">*该商品只能以起订量的整数倍购买</view>
  166. </view>
  167. <view class="layer-nunbox-t">
  168. <view class="layer-nunbox-text">数量:</view>
  169. <view class="number-box">
  170. <view class="iconfont icon-jianhao" :class="[isQuantity==true?'disabled':'']" @click="changeCountSub()"></view>
  171. <input class="btn-input" type="number" v-model="number" maxlength='4' @blur="changeNumber($event)">
  172. <view class="iconfont icon-jiahao" :class="[isStock==true?'disabled':'']" @click="changeCountAdd()"></view>
  173. </view>
  174. </view>
  175. <view class="layer-nunbox-b">
  176. <view class="text">单价:
  177. <text class="p sm">¥</text>
  178. <text class="p bg">{{buyRetailPrice.toFixed(2)}}</text>
  179. </view>
  180. </view>
  181. </view>
  182. </view>
  183. <view class="btn"><view class="button" @click.stop="btnConfirm">确定</view></view>
  184. </view>
  185. </view>
  186. </view>
  187. </view>
  188. </template>
  189. <script>
  190. import { mapState,mapMutations } from 'vuex'
  191. import customP from '@/components/cm-module/headerNavbar/header-poduct' //自定义导航
  192. import cmPrice from "@/components/cm-module/productDetails/cm-price.vue" //价格显示
  193. import cmAttributes from "@/components/cm-module/productDetails/cm-attributes.vue" //规格信息
  194. import authorize from '@/common/config/authorize.js'
  195. import uniStars from '@/components/uni-stars/uni-stars.vue'
  196. import parser from "@/components/jyf-Parser/index" //富文本处理
  197. import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
  198. import recommend from "@/components/cm-module/productDetails/recommend" //相关推荐
  199. import cmParameter from "@/components/cm-module/productDetails/cm-parameter" //相关参数
  200. import cmService from "@/components/cm-module/productDetails/cm-service" //服务项目
  201. import wxLogin from "@/common/config/wxLogin.js"
  202. import { queryProductDetils } from "@/api/product.js"
  203. import { shoppingAddCart } from "@/api/cart.js"
  204. var isPreviewImg;
  205. export default{
  206. components:{
  207. customP,
  208. parser,
  209. tuiSkeleton,
  210. recommend,
  211. cmPrice,
  212. cmAttributes,
  213. cmParameter,
  214. cmService
  215. },
  216. data(){
  217. return{
  218. html:'<div style="text-align: center;color:#333333;">暂无内容</div>',
  219. disabledTabNavList:[{name:'相关推荐'}],
  220. mode:'round',
  221. specClass: '',//规格弹窗css类,控制开关动画
  222. isBtnType:'',
  223. isRequest:false,
  224. current:0,
  225. isShareType:'',
  226. isHeaderPoduct:false,
  227. navbarFiexd:'none',
  228. ladderPriceFlag:'',
  229. ladderPriceList:'',
  230. isRecommend:false,
  231. isRarameter:true,
  232. isService:false,
  233. isEvaluate:false,
  234. isAnimation:false,
  235. skeletonShow:true,
  236. isQuantity:false,
  237. isStock:false,
  238. disabled:false,
  239. isNoneDisabled:false,
  240. tabCurrentIndex:0,
  241. userID:'',
  242. productID:0,
  243. userIdentity:'',//用户类型
  244. goodsData:{},//自定义数据
  245. shop:{},//供应商信息
  246. product:{},//采美
  247. productImage:[],
  248. retailPrice:0,
  249. buyRetailPrice:0,
  250. buyRetailPriceStep:1,
  251. stock:0,
  252. number:0,
  253. minBuyNumber:0,
  254. productsList:[],
  255. goodListData:[],
  256. headerBtnPosi: this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
  257. systeminfo: this.setSysteminfo(), //获取设备信息
  258. isIphoneX:this.$store.state.isIphoneX,
  259. windowHeight: '',
  260. headerColor:false,
  261. backPage:1,
  262. nvabarData: { //顶部自定义导航
  263. showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示
  264. title: '' // 导航栏 中间的标题
  265. }
  266. }
  267. },
  268. onLoad(option) {
  269. this.productID = option.id;//获取商品ID
  270. this.isShareType = option.type
  271. this.isHeaderPoduct = true
  272. if(option.page == 2){
  273. this.backPage = option.page
  274. }
  275. if(this.isShareType =='share'){
  276. authorize.getSetting().then(wxResponse =>{// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
  277. console.log(wxResponse)
  278. if(wxResponse == 1){
  279. wxLogin.wxLoginAuthorize()
  280. }else{
  281. console.log(new Date +'用户未授权微信信息')
  282. }
  283. })
  284. }
  285. },
  286. computed: {
  287. ...mapState(['hasLogin','isWxAuthorize'])
  288. },
  289. methods:{
  290. initData(){// 初始化商品详情查询
  291. queryProductDetils({userId:this.userID,productID:this.productID}).then(response =>{
  292. this.skeletonShow = false
  293. this.productImage=[];
  294. this.shop = response.data.shop
  295. this.product = response.data
  296. this.ladderPriceFlag = this.product.ladderPriceFlag;
  297. this.html = this.product.productDetail == null ? this.html : this.$api.adaptRichTextImg(this.product.productDetail.detailInfo)
  298. this.stock = this.product.stock
  299. this.buyRetailPriceStep = this.product.step
  300. this.number = this.product.minBuyNumber
  301. this.minBuyNumber = this.product.minBuyNumber
  302. //处理商品图片列表
  303. this.product.imageList.forEach(item =>{
  304. this.productImage.push(item.image);
  305. })
  306. //购物车数量
  307. this.goodsData.cartCount = this.product.productCount
  308. //处理阶梯价格
  309. if(this.product.ladderPriceList!=null){
  310. this.ladderPriceList = this.product.ladderPriceList;
  311. }
  312. //拆分金额并转千分位格式显示
  313. if(this.product.retailPrice!=null){
  314. this.retailPrice = this.product.retailPrice.toFixed(2);
  315. this.buyRetailPrice = this.product.retailPrice;
  316. }
  317. //处理下架商品和售罄商品
  318. if(this.product.validFlag =='3' || this.stock == 0 ){
  319. this.disabled = true
  320. this.isNoneDisabled = true
  321. this.tabCurrentIndex = 2;// 页面显示是默认选中第一
  322. this.isRecommend = true
  323. this.goodsData.disabledText = '下架'
  324. }else{
  325. this.disabled = false
  326. this.isNoneDisabled = false
  327. this.tabCurrentIndex = 0;// 页面显示是默认选中第三
  328. this.goodsData.disabledText = ''
  329. }
  330. if(this.product.price1TextFlag == "1"){
  331. this.disabled = true
  332. }
  333. if(this.product.price1TextFlag == "2"){
  334. if(this.userIdentity == 4){
  335. this.disabled = true
  336. }else{
  337. this.disabled = false
  338. }
  339. }
  340. this.goodsData.disabled = this.disabled
  341. this.goodsData.isNoneDisabled = this.isNoneDisabled
  342. if(this.product.validFlag =='3'){
  343. this.goodsData.disabledText = '下架'
  344. }
  345. if(this.stock == 0){
  346. this.goodsData.disabledText = '售罄'
  347. }
  348. this.isRequest = true
  349. }).catch(error =>{
  350. this.$util.msg(error.msg,2000);
  351. })
  352. },
  353. swiperChange(e) {//顶部商品图片切换
  354. const index = e.detail.current;
  355. this.current = index;
  356. },
  357. previewImg (index) {//顶部商品图片预览
  358. isPreviewImg = true
  359. let previewUrls = this.productImage
  360. uni.previewImage({
  361. current: index, //图片索引
  362. urls: previewUrls, //必须是http图片,本地图片无效
  363. longPressActions:''
  364. })
  365. },
  366. tabClick(index) {//商品详情&&供应商信息tab切换
  367. this.tabCurrentIndex = index;
  368. switch(this.tabCurrentIndex){
  369. case 1:
  370. this.isRarameter = true
  371. break;
  372. case 2:
  373. this.isService = true
  374. break;
  375. case 3:
  376. this.isRecommend = true
  377. break;
  378. }
  379. },
  380. handleContact(e){//跳转小程序客服
  381. },
  382. buyProductCart(){//底部购物车按钮点击
  383. authorize.getSetting().then(wxResponse =>{// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
  384. if(wxResponse == 1){
  385. if(this.hasLogin){
  386. this.$api.navigateTo('/pages/goods/cart')
  387. }else{
  388. this.$api.navigateTo('/pages/login/login?type=1')
  389. }
  390. }else{
  391. this.$api.navigateTo('/pages/authorization/authorization?type=1')
  392. }
  393. })
  394. },
  395. btnGetConfirm(type){//加入购物车&&立即购买点击
  396. authorize.getSetting().then(wxResponse =>{// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
  397. if(wxResponse == 1){
  398. if(this.hasLogin){
  399. this.showSpec(type);
  400. }else{
  401. this.$api.navigateTo('/pages/login/login?type=1')
  402. }
  403. }else{
  404. this.$api.navigateTo('/pages/authorization/authorization?type=1')
  405. }
  406. })
  407. },
  408. changeCountAdd(){//popup弹窗数量增加按钮
  409. if(this.buyRetailPriceStep == 2){
  410. this.number+=this.minBuyNumber
  411. }else{
  412. this.number++
  413. }
  414. this.processActivityPrice()
  415. },
  416. changeCountSub(){//popup弹窗数量减按钮
  417. if(this.number<=this.minBuyNumber){
  418. this.number= this.minBuyNumber
  419. this.isQuantity =true
  420. this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`,2000);
  421. return
  422. }else{
  423. if(this.buyRetailPriceStep == 2){
  424. this.number-=this.minBuyNumber
  425. }else{
  426. this.number--
  427. }
  428. this.processActivityPrice()
  429. this.isQuantity =false
  430. }
  431. },
  432. changeNumber(e){
  433. let _value = e.detail.value;
  434. if(!this.$api.isNumber(_value)){
  435. this.number = this.minBuyNumber
  436. }else if(_value < this.minBuyNumber){
  437. this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`,2000);
  438. this.number = this.minBuyNumber
  439. }else if( _value % this.minBuyNumber !=0 ){
  440. this.$util.msg(`购买量必须为起订量的整数倍`,2000);
  441. this.number = this.minBuyNumber
  442. }else{
  443. this.number = e.detail.value
  444. }
  445. this.processActivityPrice()
  446. },
  447. processActivityPrice(){//单独处理活动价格和阶梯价格
  448. if(this.ladderPriceFlag == '0' && this.product.actStatus == 0){
  449. this.buyRetailPrice = this.product.retailPrice
  450. }else{
  451. this.ladderPriceList.forEach((item,index)=>{
  452. if(this.number>=item.buyNum){
  453. this.buyRetailPrice = item.buyPrice
  454. }
  455. })
  456. }
  457. },
  458. showSpec(type) {//显示选择数量确认弹窗
  459. this.isBtnType = type
  460. this.specClass = 'show';
  461. },
  462. hideSpec() {//关闭选择数量确认弹窗
  463. this.specClass = 'hide';
  464. setTimeout(() => {
  465. this.specClass = 'none';
  466. }, 200);
  467. },
  468. btnConfirm() {//加入购物车&&立即购买跳转订单页并关闭弹窗
  469. if(this.isBtnType == 'add'){
  470. this.getAddProductCart()
  471. }else{
  472. this.toConfirmation()
  473. }
  474. },
  475. toConfirmation(){//跳转确认订单页面
  476. this.specClass = 'hide';
  477. let productStp ={
  478. allPrice:this.number*this.buyRetailPrice,
  479. allCount:this.number,
  480. productID:this.product.productID,
  481. productCount:this.number
  482. }
  483. this.$api.navigateTo(`/pages/user/order/create-order?type=prodcut&data=${JSON.stringify({data:productStp})}`)
  484. setTimeout(() => {
  485. this.specClass = 'none';
  486. }, 200);
  487. },
  488. getAddProductCart(){//增加购物车成功和toast弹窗提示成功
  489. shoppingAddCart({productID:this.productID,userID:this.userID,productCount:this.number}).then(response => {
  490. this.specClass = 'hide';
  491. this.$util.msg('加入购物车成功',1500,true,'success')
  492. this.isAnimation = true
  493. setTimeout(() => {this.specClass = 'none'}, 200)
  494. setTimeout(() => {this.isAnimation = false},2000)
  495. this.goodsData.cartCount = response.data;
  496. }).catch(error =>{
  497. this.$util.msg(error.msg,2000);
  498. })
  499. },
  500. navToLogin(){
  501. authorize.getSetting().then(wxResponse =>{// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
  502. if(wxResponse == 1){
  503. this.$api.navigateTo(`/pages/login/login?type=detilType&id=${this.productID}`)
  504. }else{
  505. this.$api.navigateTo('/pages/authorization/authorization?type=1')
  506. }
  507. })
  508. },
  509. setHeaderBtnPosi(){
  510. // 获得胶囊按钮位置信息
  511. let headerBtnPosi = uni.getMenuButtonBoundingClientRect();
  512. return headerBtnPosi
  513. },
  514. setSysteminfo(){
  515. let systeminfo;
  516. uni.getSystemInfo({ // 获取设备信息
  517. success: (res) => {
  518. systeminfo = res
  519. },
  520. })
  521. return systeminfo
  522. },
  523. getOptionFn(e){
  524. this.isShareType = e.type
  525. },
  526. goSupplier(){
  527. this.$api.setStorage('supplierInfo',this.shop)
  528. this.$api.navigateTo('/pages/goods/supplier')
  529. },
  530. discard(){
  531. //丢弃
  532. }
  533. },
  534. onPageScroll(e){//实时获取到滚动的值
  535. if(e.scrollTop>50){
  536. this.headerColor = true
  537. this.nvabarData={
  538. showCapsule: 1,
  539. title: '商品详情',
  540. }
  541. }else{
  542. this.headerColor = false
  543. this.nvabarData={
  544. showCapsule: 1,
  545. title: '',
  546. }
  547. }
  548. if(e.scrollTop>700){
  549. this.navbarFiexd = 'fixed'
  550. }else{
  551. this.navbarFiexd = 'none'
  552. }
  553. },
  554. onShareAppMessage(res){//分享转发
  555. if (res.from === 'button') {
  556. // 来自页面内转发按钮
  557. }
  558. return {
  559. title: `${this.product.name}`,
  560. path: `pages/goods/product?type=share&id=${this.productID}`,
  561. imageUrl:`${this.productImage[0]}`
  562. }
  563. },
  564. onShow() {
  565. this.$api.getStorage().then((resolve) => {
  566. this.userID = resolve.userID ? resolve.userID : '';
  567. this.userIdentity = resolve.userIdentity ? resolve.userIdentity : 3
  568. if (isPreviewImg) {
  569. isPreviewImg = false;
  570. return;
  571. } else {
  572. this.initData();
  573. }
  574. }).catch(error =>{
  575. this.initData();
  576. })
  577. }
  578. }
  579. </script>
  580. <style lang="scss">
  581. page{
  582. background-color: #F7F7F7;
  583. }
  584. .productRemarks{
  585. color: #FF2A2A;
  586. font-size: 24rpx;
  587. margin-bottom: 16rp
  588. }
  589. .banner-section{
  590. width: 100%;
  591. height: 750rpx;
  592. position: relative;
  593. border-bottom: 1px solid #EBEBEB;
  594. }
  595. .banner{
  596. width: 100%;
  597. height: 750rpx;
  598. .product-img{
  599. width: 750rpx;
  600. }
  601. image {
  602. width: 100%;
  603. height: 100%;
  604. }
  605. }
  606. .swiper__dots-box{
  607. position: absolute;
  608. bottom: 24px;
  609. right: 24rpx;
  610. /* #ifndef APP-NVUE */
  611. display: flex;
  612. /* #endif */
  613. flex: 1;
  614. flex-direction: row;
  615. justify-content: center;
  616. align-items: center;
  617. height: 12rpx;
  618. padding: 10rpx;
  619. background: rgba(174,174,174,0.6);
  620. border-radius:16rpx;
  621. .swiper__dots-item{
  622. width: 12rpx;
  623. height: 12rpx;
  624. border-radius: 100%;
  625. margin: 6rpx;
  626. background: rgba(62,62,62,1);
  627. }
  628. .none{
  629. background:#FFFFFF;
  630. }
  631. .swiper__dots-long{
  632. background: rgba(62,62,62,1);
  633. transition: all 0.1s;
  634. }
  635. }
  636. .product-wrap{
  637. width: 100%;
  638. height: auto;
  639. padding: 24rpx 0 0 0;
  640. background-color: #FFFFFF;
  641. border-bottom: 20rpx solid #F7F7F7;
  642. .wrap-top{
  643. width: 702rpx;
  644. padding: 0 24rpx;
  645. height: auto;
  646. float: left;
  647. padding-bottom: 24rpx;
  648. border-bottom: 1px solid #F8F8F8;
  649. &.none{
  650. .p-title{
  651. color:#999999
  652. }
  653. }
  654. .p-title{
  655. line-height: 40rpx;
  656. font-size: $font-size-28;
  657. color: $text-color;
  658. font-weight: Bold;
  659. -o-text-overflow: ellipsis;
  660. text-overflow: ellipsis;
  661. display: -webkit-box;
  662. word-break: break-all;
  663. -webkit-box-orient: vertical;
  664. -webkit-line-clamp: 2;
  665. overflow: hidden;
  666. margin-bottom: 16rpx;
  667. }
  668. .wrap-main-pricenone{
  669. line-height: 44rpx;
  670. color: #FF2A2A;
  671. font-size: $font-size-28;
  672. font-weight: 600;
  673. }
  674. .wrap-main-text{
  675. display: block;
  676. float: left;
  677. font-weight: normal;
  678. }
  679. .wrap-main-none{
  680. display: block;
  681. width: 256rpx;
  682. height: 44rpx;
  683. padding-left: 20rpx;
  684. border-radius: 11rpx;
  685. background: $btn-confirm;
  686. float: right;
  687. line-height: 44rpx;
  688. color: #FFFFFF;
  689. text-align: center;
  690. font-size: $font-size-24;
  691. }
  692. .p-active{
  693. width: 130rpx;
  694. height: 44rpx;
  695. display: flex;
  696. align-items: center;
  697. flex-direction: row;
  698. float: left;
  699. .icon-active{
  700. width: 124rpx;
  701. height: 30rpx;
  702. display: block;
  703. }
  704. }
  705. .p-price{
  706. height: 44rpx;
  707. line-height: 44rpx;
  708. float: left;
  709. .txt{
  710. color: #FF2A2A;
  711. margin:0 2rpx;
  712. }
  713. .txt.sm{
  714. font-size: $font-size-24;
  715. }
  716. .txt.big{
  717. font-size: $font-size-32;
  718. }
  719. }
  720. .p-price-none{
  721. height: 44rpx;
  722. line-height: 44rpx;
  723. float: left;
  724. font-size: $font-size-24;
  725. color: #666;
  726. text-decoration: line-through;
  727. margin-left: 10rpx;
  728. }
  729. .p-minBuy{
  730. height: 44rpx;
  731. line-height: 44rpx;
  732. float: right;
  733. padding: 0 18rpx;
  734. border-radius: 22rpx;
  735. background-color: #EBEBEB;
  736. color: #7F7F7F;
  737. font-size: 24rpx;
  738. text-align: center;
  739. .min-text{
  740. margin: 0 6rpx;
  741. }
  742. }
  743. .p-login{
  744. height: 44rpx;
  745. line-height: 44rpx;
  746. color: $color-system;
  747. font-size: $font-size-24;
  748. &.grade{
  749. margin-bottom: 20rpx;
  750. }
  751. .p-no{
  752. float: left;
  753. margin-right: 5rpx;
  754. font-size: $font-size-28;
  755. }
  756. .p-login-btn{
  757. display: block;
  758. height: 44rpx;
  759. padding: 0 10rpx 0 20rpx;
  760. border-radius: 11rpx;
  761. background: $btn-confirm;
  762. float: right;
  763. line-height: 44rpx;
  764. color: #FFFFFF;
  765. text-align: center;
  766. font-size: $font-size-24;
  767. }
  768. }
  769. }
  770. .wrap-active{
  771. width: 100%;
  772. float: left;
  773. height: 80rpx;
  774. background: linear-gradient(225deg,rgba(255,143,101,1) 0%,rgba(248,79,57,1) 100%);
  775. line-height: 80rpx;
  776. font-size: $font-size-26;
  777. color: #FFFFFF;
  778. text-align: center;
  779. }
  780. .wrap-ladder{
  781. float: left;
  782. width: 702rpx;
  783. border-bottom: 1px solid #F8F8F8;
  784. .ladder-text{
  785. height: 34rpx;
  786. line-height: 34rpx;
  787. margin-bottom: 24rpx;
  788. font-size: 24rpx;
  789. color: #999999;
  790. .ladder-p{
  791. font-size: 20rpx;
  792. }
  793. }
  794. .ladder-main{
  795. width: 654rpx;
  796. height: 102rpx;
  797. padding: 24rpx;
  798. background: url(https://img.caimei365.com/group1/M00/03/95/Cmis216Sk_WASybTAAI2gyWbunM918.png);
  799. background-size: cover;
  800. border-radius: 20rpx;
  801. display: flex;
  802. .ladder-left{
  803. flex: 1.5;
  804. line-height: 51rpx;
  805. font-size: 24rpx;
  806. .ladder-b{
  807. text-align-last: justify;
  808. }
  809. }
  810. .ladder-right{
  811. height: 100%;
  812. display: flex;
  813. align-items: center;
  814. flex: 8.5;
  815. .ladder-li{
  816. height: 100%;
  817. flex: 1;
  818. display:flex;
  819. flex-flow: column;
  820. align-items: center;
  821. .ladder-a{
  822. flex: 1;
  823. height: 51rpx;
  824. line-height: 51rpx;
  825. font-size: 26rpx;
  826. text-align: justify;
  827. color: #FA6400;
  828. font-weight: bold;
  829. }
  830. }
  831. }
  832. }
  833. }
  834. .wrap-label{
  835. float: left;
  836. width: 702rpx;
  837. padding: 24rpx 24rpx 0 24rpx;
  838. border-bottom: 1px solid #F8F8F8;
  839. .label-a{
  840. padding: 0 18rpx;
  841. line-height: 40rpx;
  842. font-size: $font-size-24;
  843. color: #FFFFFF;
  844. text-align: center;
  845. border-radius: 20rpx;
  846. background:#A69DFE;
  847. margin: 0 22rpx 22rpx 0;
  848. display: inline-block;
  849. }
  850. }
  851. .wrap-info{
  852. float: left;
  853. width: 702rpx;
  854. padding: 24rpx 24rpx 0 24rpx;
  855. border-bottom: 1px solid #F8F8F8;
  856. .info-viewT{
  857. width: 100%;
  858. min-height: 40rpx;
  859. font-size: $font-size-28;
  860. color: $text-color;
  861. line-height: 40rpx;
  862. text-align: left;
  863. &.none{
  864. color: #999999;
  865. }
  866. .info-viewL{
  867. min-width: 350rpx;
  868. float: left;
  869. margin-bottom: 24rpx;
  870. }
  871. .info-viewR{
  872. min-width: 352rpx;
  873. float: left;
  874. margin-bottom: 24rpx;
  875. }
  876. }
  877. .info-viewB{
  878. width: 100%;
  879. height: auto;
  880. }
  881. .info-f{
  882. width: 50%;
  883. float: left;
  884. font-size: $font-size-28;
  885. color: $text-color;
  886. line-height: 40rpx;
  887. margin-bottom: 24rpx;
  888. text-align: left;
  889. }
  890. }
  891. .wrap-seve{
  892. float: left;
  893. width: 702rpx;
  894. padding: 0 24rpx;
  895. height: 72rpx;
  896. line-height: 72rpx;
  897. font-size: $font-size-28;
  898. color: $text-color;
  899. border-bottom: 1px solid #F8F8F8;
  900. &.none{
  901. color: #999999;
  902. .text{
  903. color: #999999;
  904. }
  905. }
  906. .iconfont{
  907. color: $color-system;
  908. margin-left: 20rpx;
  909. font-size: $font-size-24;
  910. }
  911. .text{
  912. font-size: $font-size-24;
  913. color: $text-color;
  914. margin-left: 10rpx;
  915. }
  916. }
  917. }
  918. .product-supplier{
  919. width: 702rpx;
  920. height: 88rpx;
  921. padding: 0 24rpx;
  922. background-color: #FFFFFF;
  923. margin-bottom: 24rpx;
  924. position: relative;
  925. display: flex;
  926. .title{
  927. display: flex;
  928. flex: 2;
  929. line-height: 88rpx;
  930. display: inline-block;
  931. float: left;
  932. font-size: $font-size-28;
  933. color: $text-color;
  934. }
  935. .name{
  936. display: flex;
  937. flex: 2;
  938. line-height: 88rpx;
  939. display: inline-block;
  940. float: left;
  941. font-size: $font-size-24;
  942. color: #D0D0D0;
  943. float: right;
  944. padding-right: 48rpx;
  945. overflow: hidden;
  946. text-overflow:ellipsis;
  947. white-space: nowrap;
  948. text-align: right;
  949. }
  950. .icon-xiayibu{
  951. line-height: 88rpx;
  952. display: inline-block;
  953. position: absolute;
  954. width: 48rpx;
  955. top: 0;
  956. right: 0;
  957. }
  958. }
  959. .product-details {
  960. height: 100%;
  961. background: #FFFFFF;
  962. .navbar {
  963. width: 702rpx;
  964. height: 96rpx;
  965. padding: 0 24rpx;
  966. background: #fff;
  967. z-index: 10;
  968. display: flex;
  969. border-bottom: 1px solid #F8F8F8;
  970. &.fixed{
  971. position: fixed;
  972. left: 0;
  973. }
  974. .nav-item {
  975. display: flex;
  976. flex: 1;
  977. justify-content: center;
  978. align-items: center;
  979. height: 96rpx;
  980. font-size: $font-size-28;
  981. color: $text-color;
  982. position: relative;
  983. float: left;
  984. position: relative;
  985. .line{
  986. width: 60%;
  987. height: 2px;
  988. border-radius: 1px;
  989. background: #FFFFFF;
  990. position: absolute;
  991. bottom: 0;
  992. left: 50%;
  993. margin-left: -30%;
  994. }
  995. &.current{
  996. color:$color-system;
  997. .line{
  998. background: $color-system;
  999. }
  1000. }
  1001. }
  1002. }
  1003. .content{
  1004. width: 100%;
  1005. min-height: 750rpx;
  1006. }
  1007. }
  1008. .isLower{
  1009. width: 100%;
  1010. height: 116rpx;
  1011. line-height: 116rpx;
  1012. text-align: center;
  1013. color: #000000;
  1014. font-size: $font-size-32;
  1015. font-weight: bold;
  1016. }
  1017. .bottom-btn{
  1018. width: 100%;
  1019. height: 110rpx;
  1020. position: fixed;
  1021. bottom: 0;
  1022. left: 0;
  1023. background: #FFFFFF;
  1024. z-index: 99;
  1025. .bottom-le{
  1026. width: 302rpx;
  1027. height: 86rpx;
  1028. padding:12rpx 24rpx;
  1029. float: left;
  1030. .item-bt{
  1031. width: 86rpx;
  1032. height: 100%;
  1033. margin-right:22rpx;
  1034. display: flex;
  1035. float: left;
  1036. flex-direction: column;
  1037. align-items: center;
  1038. font-size: $font-size-24;
  1039. color: $text-color;
  1040. line-height: 34rpx;
  1041. position: relative;
  1042. .animation-num{
  1043. font-size:$font-size-32 ;
  1044. color: #FF2A2A;
  1045. position: absolute;
  1046. top: -12rpx;
  1047. right: 4rpx;
  1048. font-weight: bold;
  1049. }
  1050. .animation{
  1051. animation: showAmnation 2.2s ease-in-out both;
  1052. }
  1053. .restion{
  1054. animation: hideAmnation 1s ease-in-out both;
  1055. }
  1056. .icon-num{
  1057. position: absolute;
  1058. right:-12rpx;
  1059. top: -9rpx;
  1060. }
  1061. .icon-num.goleft{
  1062. right: 4rpx;
  1063. }
  1064. &:last-child{
  1065. margin-right: 0;
  1066. }
  1067. image {
  1068. width: 40rpx;
  1069. height: 40rpx;
  1070. margin-bottom: 8rpx;
  1071. }
  1072. button.contact-btn{
  1073. width: 100%;
  1074. height: 100%;
  1075. margin: 0;
  1076. padding: 0;
  1077. display: flex;
  1078. flex-direction: column;
  1079. align-items: center;
  1080. box-sizing: border-box;
  1081. font-size: $font-size-24;
  1082. text-align: center;
  1083. text-decoration: none;
  1084. line-height: 34rpx;
  1085. border-radius: 0;
  1086. -webkit-tap-highlight-color: transparent;
  1087. overflow: hidden;
  1088. color: $text-color;
  1089. background-color:#FFFFFF;
  1090. }
  1091. }
  1092. }
  1093. .bottom-ri{
  1094. width: 400rpx;
  1095. height: 100%;
  1096. float: right;
  1097. display: flex;
  1098. .btn{
  1099. flex: 1;
  1100. width: 200rpx;
  1101. line-height: 110rpx;
  1102. text-align: center;
  1103. font-size: $font-size-28;
  1104. color: #FFFFFF;
  1105. }
  1106. .btn-cart{
  1107. background-color: #EFAF00;
  1108. }
  1109. .btn-cart.disabled{
  1110. background-color: rgba(239, 175, 0, 0.5);
  1111. }
  1112. .btn-bay{
  1113. background:linear-gradient(135deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
  1114. }
  1115. .btn-bay.disabled{
  1116. background-color: linear-gradient(135deg,rgba(242,143,49,0.5) 0%,rgba(225,86,22,0.5) 100%);;
  1117. }
  1118. }
  1119. }
  1120. .uni-badge--small {
  1121. -webkit-transform: scale(.8);
  1122. -ms-transform: scale(.8);
  1123. transform: scale(.8);
  1124. -webkit-transform-origin: center center;
  1125. -ms-transform-origin: center center;
  1126. transform-origin: center center;
  1127. }
  1128. .uni-badge {
  1129. font-family: 'Helvetica Neue', Helvetica, sans-serif;
  1130. -webkit-box-sizing: border-box;
  1131. box-sizing: border-box;
  1132. font-size: 12px;
  1133. line-height: 1;
  1134. display: inline-block;
  1135. padding: 3px 6px;
  1136. color: #333;
  1137. border-radius: 100px;
  1138. background-color: #f1f1f1;
  1139. }
  1140. .uni-badge-error {
  1141. color: #fff;
  1142. background-color: #dd524d;
  1143. }
  1144. /* 加入购物模态层*/
  1145. @keyframes showPopup {
  1146. 0% {
  1147. opacity: 0;
  1148. }
  1149. 100% {
  1150. opacity: 1;
  1151. }
  1152. }
  1153. @keyframes hidePopup {
  1154. 0% {
  1155. opacity: 1;
  1156. }
  1157. 100% {
  1158. opacity: 0;
  1159. }
  1160. }
  1161. @keyframes showLayer {
  1162. 0% {
  1163. transform: translateY(0);
  1164. }
  1165. 100% {
  1166. transform: translateY(-100%);
  1167. }
  1168. }
  1169. @keyframes hideLayer {
  1170. 0% {
  1171. transform: translateY(-100%);
  1172. }
  1173. 100% {
  1174. transform: translateY(0);
  1175. }
  1176. }
  1177. @keyframes showAmnation {
  1178. 0% {
  1179. top: -12rpx;
  1180. opacity: 0;
  1181. }
  1182. 50% {
  1183. top: -60rpx;
  1184. opacity: 1;
  1185. }
  1186. 100% {
  1187. top: -100rpx;
  1188. opacity: 0;
  1189. }
  1190. }
  1191. @keyframes hideAmnation {
  1192. 0% {
  1193. top: -100rpx;
  1194. opacity: 0;
  1195. }
  1196. 100% {
  1197. top: -12rpx;
  1198. opacity: 0;
  1199. }
  1200. }
  1201. .popup {
  1202. position: fixed;
  1203. top: 0;
  1204. width: 100%;
  1205. height: 100%;
  1206. z-index: 999;
  1207. display: none;
  1208. .mask{
  1209. position: fixed;
  1210. top: 0;
  1211. width: 100%;
  1212. height: 100%;
  1213. z-index: 21;
  1214. background-color: rgba(0, 0, 0, 0.6);
  1215. }
  1216. .layer {
  1217. position: fixed;
  1218. z-index: 22;
  1219. bottom: -294rpx;
  1220. width: 702rpx;
  1221. padding: 24rpx 24rpx 36rpx 24rpx;
  1222. height: 260rpx;
  1223. border-radius: 20rpx 20rpx 0 0;
  1224. background-color: #fff;
  1225. display: flex;
  1226. flex-wrap: wrap;
  1227. align-content: space-between;
  1228. .content {
  1229. width: 100%;
  1230. }
  1231. .btn {
  1232. width: 100%;
  1233. height: 88rpx;
  1234. margin-top: 20rpx;
  1235. .button {
  1236. width: 100%;
  1237. height: 88rpx;
  1238. color: #fff;
  1239. display: flex;
  1240. align-items: center;
  1241. justify-content: center;
  1242. background: $btn-confirm;
  1243. font-size: $font-size-28;
  1244. border-radius: 14rpx;
  1245. }
  1246. }
  1247. }
  1248. &.show {
  1249. display: block;
  1250. .mask{
  1251. animation: showPopup 0.2s linear both;
  1252. }
  1253. .layer {
  1254. animation: showLayer 0.2s linear both;
  1255. }
  1256. }
  1257. &.hide {
  1258. display: block;
  1259. .mask{
  1260. animation: hidePopup 0.2s linear both;
  1261. }
  1262. .layer {
  1263. animation: hideLayer 0.2s linear both;
  1264. }
  1265. }
  1266. &.none {
  1267. display: none;
  1268. }
  1269. &.service {
  1270. .row {
  1271. margin: 30upx 0;
  1272. .title {
  1273. font-size: 30upx;
  1274. margin: 10upx 0;
  1275. }
  1276. .description {
  1277. font-size: 28upx;
  1278. color: #999;
  1279. }
  1280. }
  1281. }
  1282. .layer-smimg{
  1283. width: 114rpx;
  1284. height: 114rpx;
  1285. float: left;
  1286. border-radius: 10rpx;
  1287. margin-right: 24rpx;
  1288. image{
  1289. width: 114rpx;
  1290. height: 114rpx;
  1291. border-radius: 10rpx;
  1292. }
  1293. }
  1294. .layer-nunbox{
  1295. justify-content: space-between;
  1296. align-items: center;
  1297. width: 536rpx;
  1298. height: auto;
  1299. float: left;
  1300. .layer-nunbox-t{
  1301. width: 100%;
  1302. height:44rpx;
  1303. position:relative;
  1304. display: flex;
  1305. margin-bottom: 10rpx;
  1306. .text{
  1307. font-size: $font-size-24;
  1308. line-height: 48rpx;
  1309. color: #999999;
  1310. }
  1311. .layer-nunbox-text{
  1312. line-height: 44rpx;
  1313. font-size: $font-size-28;
  1314. }
  1315. .number-box{
  1316. display: flex;
  1317. justify-content: center;
  1318. align-items: center;
  1319. .iconfont{
  1320. font-size: $font-size-32;
  1321. padding:0 20rpx;
  1322. font-size: $text-color;
  1323. }
  1324. .btn-input{
  1325. width: 62rpx;
  1326. height: 48rpx;
  1327. line-height: 48rpx;
  1328. background: #F8F8F8;
  1329. border-radius: 4rpx;
  1330. text-align: center;
  1331. font-size: $font-size-28;
  1332. }
  1333. }
  1334. .product-step{
  1335. position: absolute;
  1336. left: 45rpx;
  1337. bottom: 0;
  1338. height: 44rpx;
  1339. background: #FFFFFF;
  1340. }
  1341. }
  1342. .layer-nunbox-b{
  1343. width: 100%;
  1344. height:44rpx;
  1345. margin-top: 13rpx;
  1346. }
  1347. .text{
  1348. line-height: 44rpx;
  1349. font-size: $font-size-28;
  1350. .p{
  1351. color: #FF2A2A;
  1352. }
  1353. .p:first-child{
  1354. margin-left: 30rpx;
  1355. }
  1356. .p.sm{
  1357. font-size: $font-size-24;
  1358. }
  1359. }
  1360. }
  1361. }
  1362. /*富文本样式*/
  1363. rich-text.p{
  1364. width: 702rpx !important;
  1365. padding: 0 24rpx;
  1366. text-align: justify;
  1367. }
  1368. rich-text.img{
  1369. width: 100%;
  1370. height: auto;
  1371. }
  1372. </style>