index.vue 54 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967
  1. <template>
  2. <view :style="viewColor">
  3. <view class="product-con skeleton">
  4. <view class="head-wrapper" id="home" :style="{ top: homeTop + 'rpx' }">
  5. <view class="head-menu">
  6. <view class='iconfont icon-fanhui2' @click="returns"></view>
  7. <view class="iconfont icon-gengduo5" @click="showNav"></view>
  8. </view>
  9. </view>
  10. <!-- 导航小图标 -->
  11. <view class="dialog_nav" v-show="currentPage" :style="{ top: navH + 'rpx' }">
  12. <view class="dialog_nav_item" :class="item.after" v-for="(item,index) in selectNavList" :key="index"
  13. @click="linkPage(item.url)">
  14. <text class="iconfont" :class="item.icon"></text>
  15. <text class="pl-20">{{item.name}}</text>
  16. </view>
  17. </view>
  18. <view>
  19. <scroll-view :scroll-top="scrollTop" scroll-y='true' scroll-with-animation="true" :style='"height:"+height+"px;"'
  20. @scroll="scroll">
  21. <view id="past0">
  22. <!-- #ifdef MP || APP-PLUS -->
  23. <view class="" :style="'width:100%;' + 'height:'+sysHeight + 'px'"></view>
  24. <!-- #endif -->
  25. <productConSwiper class="skeleton-rect" :imgUrls="storeInfo.slider_image" :videoCoverImg='videoCoverImg' :videoline="storeInfo.video_link"></productConSwiper>
  26. <view class='nav acea-row row-between-wrapper' :style="{ 'background-image': `url(${domain}/static/images/seckill-bg.png)`}">
  27. <view class='money skeleton-rect'>¥<text class='num'>{{storeInfo.price}}</text><text class='y-money'>¥{{storeInfo.ot_price}}</text></view>
  28. <view class='acea-row row-middle skeleton-rect' v-if="storeInfo.seckill_status == '1'">
  29. <view class='time'>
  30. <view>距秒杀结束仅剩</view>
  31. <countDown :is-day="false" :tip-text="' '" :day-text="' '" :hour-text="' : '" :minute-text="' : '" :second-text="' '" :datatime="datatime"></countDown>
  32. </view>
  33. </view>
  34. </view>
  35. <view class='wrapper'>
  36. <view class='introduce skeleton-rect acea-row'>
  37. <view class="title">
  38. <text v-if="(storeInfo.merchant && storeInfo.merchant.type_name)" class="font-bg-red">{{storeInfo.merchant.type_name}}</text>
  39. <text v-else-if="(storeInfo.merchant && storeInfo.merchant.is_trader)" class="font-bg-red">自营</text>
  40. {{storeInfo.store_name}}
  41. </view>
  42. <view class="fenxiang_btn btn_one" @click="listenerActionSheet">
  43. <text class="iconfont icon-fenxiang4"></text><br/>分享
  44. </view>
  45. </view>
  46. <view class='label acea-row row-between-wrapper'>
  47. <view class="skeleton-rect">市场价:¥{{storeInfo.ot_price || 0}}</view>
  48. <view class="skeleton-rect">库存:{{storeInfo.stock || 0}}{{storeInfo.unit_name || ''}}</view>
  49. <view class="skeleton-rect">销量:{{storeInfo.sales || 0}}{{storeInfo.unit_name || ''}}</view>
  50. </view>
  51. </view>
  52. <view class='attribute acea-row row-between-wrapper' @click="selecAttr">
  53. <view class="skeleton-rect">{{attrTxt}}:
  54. <text class='atterTxt'>{{attrValue}}</text>
  55. </view>
  56. <view class='iconfont icon-jiantou skeleton-rect'></view>
  57. </view>
  58. <!--运费-->
  59. <view v-if="shipping || shippingValue" class='attribute acea-row row-between-wrapper' @click="showShip">
  60. <view class="acea-row row-between-wrapper skeleton-rect">运费:
  61. <text class='atterTxt'>{{shippingValue}}</text>
  62. </view>
  63. <view class='iconfont icon-jiantou skeleton-rect'></view>
  64. </view>
  65. <!--保障-->
  66. <view v-if="guarantee.length" class='attribute acea-row row-between-wrapper' @click="showGuaranee">
  67. <view class="acea-row row-between-wrapper">保障:
  68. <view class="guaranteeAttr">
  69. <text class='atterTxt1' :class="item.guarantee_name ? 'hasAttr' : ''" v-for="(item,index) in guarantee">
  70. {{item.guarantee_name ? item.guarantee_name : ''}}
  71. </text>
  72. </view>
  73. </view>
  74. <view class='iconfont icon-jiantou'></view>
  75. </view>
  76. <view v-if="specsInfo.params.length>0" class="attribute acea-row row-between-wrapper" @click="seeSpecs">
  77. <view class="acea-row row-middle">
  78. 参数:
  79. <view class="list line1">
  80. <text class="item params" v-for="(item,index) in specsInfo.params" :key="index"
  81. v-if="index<2">{{item.name}}</text>
  82. <text>...</text>
  83. </view>
  84. </view>
  85. <view class="iconfont icon-jiantou"></view>
  86. </view>
  87. </view>
  88. <view class='userEvaluation' id="past1" v-if="replyCount && replyCount>0">
  89. <view class='title acea-row row-between-wrapper'>
  90. <view>用户评价({{replyCount}})</view>
  91. <navigator class='praise' hover-class='none' :url='"/pages/users/goods_comment_list/index?product_id="+id'>
  92. <text class='t-color'>{{replyChance}}</text>好评率
  93. <text class='iconfont icon-jiantou'></text>
  94. </navigator>
  95. </view>
  96. <block v-if="replyCount">
  97. <userEvaluation :reply="reply"></userEvaluation>
  98. </block>
  99. </view>
  100. <!-- 种草秀 -->
  101. <view class='userPlant' v-if="storeInfo.community && storeInfo.community.length>0">
  102. <view class='title acea-row row-between-wrapper'>
  103. <view>种草秀 </view>
  104. <navigator class='praise' hover-class='none' :url="'/pages/plantGrass/plant_show/index?spu_id='+storeInfo.spu_id">
  105. 查看全部
  106. <text class='iconfont icon-jiantou'></text>
  107. </navigator>
  108. </view>
  109. <view class="imgList acea-row">
  110. <navigator class="pictrue" v-for="(item, index) in storeInfo.community" :key="index" v-if="index<=2"
  111. hover-class='none' :url="'/pages/plantGrass/plant_detail/index?id='+item.community_id">
  112. <image :src="item.image[0]" class="image"></image>
  113. </navigator>
  114. </view>
  115. </view>
  116. <!-- 商铺信息 -->
  117. <view class="store-wrapper" v-if="storeInfo.merchant && hide_mer_status ==0">
  118. <view class="store-hd">
  119. <view class="store-info">
  120. <navigator :url="'/pages/store/home/index?id='+storeInfo.mer_id" hover-class="none" class="logo">
  121. <image :src="storeInfo.merchant.mer_avatar" mode=""></image>
  122. </navigator>
  123. <navigator :url="'/pages/store/home/index?id='+storeInfo.mer_id" hover-class="none" class="info">
  124. <view class="name">{{storeInfo.merchant.mer_name}}
  125. <text v-if="(storeInfo.merchant && storeInfo.merchant.type_name)" class="font-bg-red ml8">{{storeInfo.merchant.type_name}}</text>
  126. <text v-else-if="(storeInfo.merchant && storeInfo.merchant.is_trader)" class="font-bg-red ml8">自营</text>
  127. </view>
  128. <view class="txt">
  129. {{storeInfo.merchant.care_count < 10000 ? storeInfo.merchant.care_count : (storeInfo.merchant.care_count/10000).toFixed(2)+'万'}}人关注
  130. </view>
  131. </navigator>
  132. <navigator :url="'/pages/store/home/index?id='+storeInfo.merchant.mer_id" class="link"
  133. hover-class="none">进店</navigator>
  134. </view>
  135. <view class="score-wrapper">
  136. <view class="item">
  137. 商品描述<text>{{storeInfo.merchant.product_score}}</text>
  138. </view>
  139. <view class="item">
  140. 卖家服务<text>{{storeInfo.merchant.service_score}}</text>
  141. </view>
  142. <view class="item">
  143. 物流服务<text>{{storeInfo.merchant.postage_score}}</text>
  144. </view>
  145. </view>
  146. </view>
  147. </view>
  148. <view class='product-intro' id="past3">
  149. <view class='title'>产品介绍</view>
  150. <view class='conter' v-if="description">
  151. <jyf-parser :domain='domain' :html="description.content" ref="article" :tag-style="tagStyle"></jyf-parser>
  152. </view>
  153. <!-- 价格说明 -->
  154. <view v-if="priceRule.content" class="price-info">
  155. <view class="price-title">价格说明</view>
  156. <!-- #ifndef APP-PLUS -->
  157. <jyf-parser :domain='domain' :html="priceRule.content.replace(/<br\/>/ig, '')" ref="article" :tag-style="tagStyle"></jyf-parser>
  158. <!-- #endif -->
  159. <!-- #ifdef APP-PLUS -->
  160. <view class="description" v-html="priceRule.content.replace(/<br\/>/ig, '')"></view>
  161. <!-- #endif -->
  162. </view>
  163. </view>
  164. <view class="content-height"></view>
  165. </scroll-view>
  166. </view>
  167. <view class='footer acea-row row-between-wrapper' :class="{'footpl':hide_mer_status==1}">
  168. <navigator v-if="hide_mer_status !=1" :url="'/pages/store/home/index?id='+storeInfo.mer_id" class='item skeleton-rect'>
  169. <view class='iconfont icon-dianpu2'></view>
  170. <view>店铺</view>
  171. </navigator>
  172. <block v-if="storeInfo.merchant">
  173. <view v-if="storeInfo.merchant.services_type== 0" class="item skeleton-rect" @click="goCustomer">
  174. <view class="iconfont icon-kefu"></view>
  175. <view>客服</view>
  176. </view>
  177. <view v-else class="item skeleton-rect" @click="call">
  178. <view class="iconfont icon-kefu"></view>
  179. <view>客服</view>
  180. </view>
  181. </block>
  182. <view @click="setCollect" class='item skeleton-rect'>
  183. <view class='iconfont icon-shoucang1' v-if="storeInfo.isRelation"></view>
  184. <view class='iconfont icon-shoucang' v-else></view>
  185. <view>收藏</view>
  186. </view>
  187. <view class='bnt acea-row skeleton-rect'>
  188. <form @submit="joinCart" report-submit='true'>
  189. <button class='joinCart bnts' @tap="openAlone">直接购买</button>
  190. </form>
  191. <form @submit="goBuy" report-submit='true' v-if="attr.productSelect && storeInfo.seckill_status == '1'">
  192. <button v-if="attr.productSelect.stock == 0" class='buy bnts' form-type="submit" disabled>已售罄</button>
  193. <button v-else class='buy bnts' form-type="submit">秒杀购买</button>
  194. </form>
  195. <form report-submit='true' v-if="storeInfo.seckill_status == '0'">
  196. <button class='buy bnts' form-type="submit" disabled>未开始</button>
  197. </form>
  198. <form report-submit='true' v-if="storeInfo.seckill_status == '-1'">
  199. <button class='buy bnts' form-type="submit" disabled>已结束</button>
  200. </form>
  201. </view>
  202. </view>
  203. <!-- 组件 -->
  204. <productWindow :attr="attr" :isShow='1' :iSplus='1' @myevent="onMyEvent" @ChangeAttr="ChangeAttr" @ChangeCartNum="ChangeCartNum"
  205. @attrVal="attrVal" @iptCartNum="iptCartNum" id='product-window' :image="storeInfo.image" :maxCount="onceCount"></productWindow>
  206. <!-- 商品参数 -->
  207. <specs :specsInfo="specsInfo" @myevent="mySpecs"></specs>
  208. <!-- 分享按钮 -->
  209. <view class="generate-posters acea-row row-middle" :class="posters ? 'on' : ''">
  210. <!-- #ifndef MP -->
  211. <button class="item" :class="weixinStatus ? 'item3' : ''" hover-class='none' v-if="weixinStatus === true" @click="H5ShareBox = true">
  212. <view class="iconfont icon-weixin3"></view>
  213. <view class="">发送给朋友</view>
  214. </button>
  215. <!-- #endif -->
  216. <!-- #ifdef MP -->
  217. <button class="item" :class="weixinStatus ? 'item3' : ''" open-type="share" hover-class='none' @click="goFriend">
  218. <view class="iconfont icon-weixin3"></view>
  219. <view class="">发送给朋友</view>
  220. </button>
  221. <!-- #endif -->
  222. <button class="item" :class="weixinStatus ? 'item3' : ''" hover-class='none' @click="downloadFilePromotionCode">
  223. <view class="iconfont icon-haibao"></view>
  224. <view class="">生成海报</view>
  225. </button>
  226. <button class="item" :class="weixinStatus ? 'item3' : ''" hover-class='none' @click="copyPwd">
  227. <view class="iconfont icon-fuzhikouling1"></view>
  228. <view>复制口令</view>
  229. </button>
  230. </view>
  231. <view class="mask" v-if="posters" @click="listenerActionClose"></view>
  232. <!--口令复制结果-->
  233. <copyPassword :isCopy='isCopy' :copyUrl='copyUrl' @close="closeCopy"></copyPassword>
  234. <!-- 海报展示 -->
  235. <view class='poster-pop' v-if="posterImageStatus">
  236. <image src='../../../static/images/poster-close.png' class='close' @click="posterImageClose"></image>
  237. <image :src='posterImage'></image>
  238. <!-- #ifndef H5 -->
  239. <view class='save-poster' @click="savePosterPath">保存到手机</view>
  240. <!-- #endif -->
  241. <!-- #ifdef H5 -->
  242. <view class="keep">长按图片可以保存到手机</view>
  243. <!-- #endif -->
  244. </view>
  245. <view class='mask' v-if="posterImageStatus"></view>
  246. <view class="mask_transparent" v-if="currentPage" @touchmove="hideNav" @click="hideNav()"></view>
  247. <canvas class="canvas" canvas-id='myCanvas' v-if="canvasStatus"></canvas>
  248. <!-- 发送给朋友图片 -->
  249. <view class="share-box" v-if="H5ShareBox">
  250. <image :src="`${domain}/static/images/share-info.png`" @click="H5ShareBox = false"></image>
  251. </view>
  252. <guaranteeTemplate ref="guartemplate" :guarantee='guarantee' :shipping='shipping'></guaranteeTemplate>
  253. <!-- #ifndef H5 -->
  254. <passwordPopup></passwordPopup>
  255. <!-- #endif -->
  256. </view>
  257. </view>
  258. </template>
  259. <script>
  260. // +----------------------------------------------------------------------
  261. // | CRMEB [ CRMEB赋能开发者,助力企业发展 ]
  262. // +----------------------------------------------------------------------
  263. // | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
  264. // +----------------------------------------------------------------------
  265. // | Licensed CRMEB并不是自由软件,未经许可不能去掉CRMEB相关版权
  266. // +----------------------------------------------------------------------
  267. // | Author: CRMEB Team <admin@crmeb.com>
  268. // +----------------------------------------------------------------------
  269. var sysHeight = uni.getSystemInfoSync().statusBarHeight;
  270. import {
  271. getSeckillProductDetail,
  272. getProductParmas,
  273. getProductCode,
  274. collectAdd,
  275. collectDel,
  276. postCartAdd,
  277. copyPasswordApi, priceRuleApi
  278. } from '@/api/store.js';
  279. import { getUserInfo, imgToBase } from '@/api/user.js';
  280. import { getCoupons, getShopCoupons } from '@/api/api.js';
  281. import { getCartCounts } from '@/api/order.js';
  282. import { mapGetters } from "vuex";
  283. import { imageBase64 } from "@/api/public";
  284. import specs from '@/components/specs/index.vue';
  285. import productConSwiper from '@/components/productConSwiper';
  286. import productWindow from '@/components/productWindow';
  287. import copyPassword from '@/components/copyPassword';
  288. import userEvaluation from '@/components/userEvaluation';
  289. import countDown from '@/components/countDown';
  290. import home from '@/components/home';
  291. import { HTTP_REQUEST_URL } from '@/config/app';
  292. import { silenceBindingSpread, configMap } from "@/utils";
  293. import parser from "@/components/jyf-parser/jyf-parser";
  294. import { toLogin } from '@/libs/login.js';
  295. // #ifndef H5
  296. import passwordPopup from '@/components/passwordPopup';
  297. // #endif
  298. import history from "@/mixins/history";
  299. import shareScence from "@/libs/spread";
  300. import guaranteeTemplate from '@/components/freightGuarantee';
  301. const app = getApp();
  302. export default {
  303. components: {
  304. // #ifndef H5
  305. passwordPopup,
  306. // #endif
  307. specs,
  308. productConSwiper,
  309. productWindow,
  310. userEvaluation,
  311. home,
  312. countDown,
  313. guaranteeTemplate,
  314. copyPassword,
  315. "jyf-parser": parser,
  316. },
  317. mixins: [history],
  318. data() {
  319. let that = this;
  320. return {
  321. isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
  322. countDownHour: "00",
  323. countDownMinute: "00",
  324. countDownSecond: "00",
  325. datatime: '',
  326. sysHeight: sysHeight, //系统导航条高度
  327. //属性是否打开
  328. coupon: {
  329. 'coupon': false,
  330. list: [],
  331. },
  332. attrTxt: '选择', //属性页面提示
  333. attrValue: '', //已选属性
  334. animated: false, //购物车动画
  335. id: 0, //商品id
  336. replyCount: 0, //总评论数量
  337. reply: [], //评论列表
  338. storeInfo: {
  339. price: 0,
  340. ot_price: 0,
  341. store_name: "",
  342. sales: 0,
  343. stock: 0,
  344. }, //商品详情
  345. productValue: [], //系统属性
  346. cart_num: 1, //购买数量
  347. isOpen: false, //是否打开属性组件
  348. actionSheetHidden: true,
  349. posterImageStatus: false,
  350. storeImage: '', //海报产品图
  351. PromotionCode: '', //二维码图片
  352. canvasStatus: false, //海报绘图标签
  353. posterImage: '', //海报路径
  354. posterbackgd: '/static/images/posterbackgd.png',
  355. // uid: 0, //用户uid
  356. circular: false,
  357. autoplay: false,
  358. interval: 3000,
  359. duration: 500,
  360. clientHeight: "",
  361. priceRule: "",
  362. replyChance: 0,
  363. CartCount: 0,
  364. onceCount: 0,
  365. posters: false,
  366. weixinStatus: false,
  367. attr: {
  368. cartAttr: false,
  369. productAttr: [],
  370. productSelect: {}
  371. },
  372. description: '',
  373. navActive: 0,
  374. H5ShareBox: false, //公众号分享图片
  375. activity: [],
  376. retunTop: true, //顶部返回
  377. navH: "",
  378. navList: [],
  379. opacity: 0,
  380. scrollY: 0,
  381. topArr: [],
  382. toView: '',
  383. height: 0,
  384. heightArr: [],
  385. lock: false,
  386. scrollTop: 0,
  387. tagStyle: {
  388. img: 'width:100%;display:block;'
  389. },
  390. // 动画状态
  391. showAnimate: true,
  392. domain: HTTP_REQUEST_URL,
  393. currSpid: "",
  394. time_id: "",
  395. codeImg: "",
  396. videoCoverImg: "",
  397. shipping: "",
  398. guarantee: [],
  399. recommend: [],
  400. shippingValue: "",
  401. isCopy: false,
  402. copyUrl: '',
  403. services_type: "",
  404. specsInfo: {
  405. show: false,
  406. params: []
  407. },
  408. currentPage: false,
  409. homeTop: 59,
  410. selectNavList: [{
  411. name: '首页',
  412. icon: 'icon-shouye8',
  413. url: '/pages/index/index',
  414. after: 'dialog_after'
  415. },
  416. {
  417. name: '搜索',
  418. icon: 'icon-sousuo6',
  419. url: '/pages/columnGoods/goods_search_con/index',
  420. after: 'dialog_after'
  421. },
  422. {
  423. name: '购物车',
  424. icon: 'icon-gouwuche7',
  425. url: '/pages/order_addcart/order_addcart',
  426. after: 'dialog_after'
  427. },
  428. {
  429. name: '我的收藏',
  430. icon: 'icon-shoucang3',
  431. url: '/pages/users/user_goods_collection/index',
  432. after: 'dialog_after'
  433. },
  434. {
  435. name: '个人中心',
  436. icon: 'icon-gerenzhongxin1',
  437. url: '/pages/user/index'
  438. },
  439. ],
  440. };
  441. },
  442. computed: configMap(['hide_mer_status','site_name','share_pic'],mapGetters(['isLogin','uid','viewColor'])),
  443. onLoad(options) {
  444. let that = this;
  445. if (options.spid) {
  446. that.currSpid = options.spid
  447. app.globalData.spid = options.spid;
  448. }
  449. var pages = getCurrentPages();
  450. if (pages.length <= 1) {
  451. that.retunTop = false
  452. }
  453. that.navH = app.globalData.navHeight+10;
  454. // #ifdef APP-PLUS
  455. that.homeTop = (that.sysHeight + 8)*2;
  456. // #endif
  457. // #ifdef H5
  458. that.homeTop = 10;
  459. // #endif
  460. this.id = options.id;
  461. this.time_id = options.time_id
  462. if (options.id) {
  463. this.id = options.id
  464. }
  465. uni.getSystemInfo({
  466. success: function(res) {
  467. that.height = res.windowHeight
  468. },
  469. });
  470. //扫码携带参数处理
  471. // #ifdef MP
  472. if (options.scene) {
  473. let value = this.$util.getUrlParams(decodeURIComponent(options.scene));
  474. if (value.id) options.id = value.id;
  475. //记录推广人uid
  476. if (value.spid) {
  477. app.globalData.spid = value.spid;
  478. that.currSpid = value.spid
  479. }
  480. }
  481. if (!options.id && !options.scene) {
  482. return this.$util.Tips({
  483. title: '缺少参数无法查看商品'
  484. }, {
  485. tab: 3,
  486. url: 1
  487. });
  488. } else {
  489. this.id = options.id
  490. }
  491. //记录推广人uid
  492. if (options.spid) app.globalData.spid = options.spid;
  493. // #endif
  494. shareScence(that.currSpid, that.isLogin)
  495. this.getGoodsDetails();
  496. //#ifdef H5
  497. this.isLogin && silenceBindingSpread();
  498. //#endif
  499. if (this.isLogin) {
  500. // this.downloadFilePromotionCode();
  501. }
  502. },
  503. onReady() {
  504. this.isNodes++;
  505. this.$nextTick(function() {
  506. // #ifdef MP
  507. const menuButton = uni.getMenuButtonBoundingClientRect();
  508. const query = uni.createSelectorQuery().in(this);
  509. query
  510. .select('#home')
  511. .boundingClientRect(data => {
  512. this.homeTop = menuButton.top * 2 + menuButton.height - data.height;
  513. })
  514. .exec();
  515. // #endif
  516. });
  517. },
  518. mounted: function() {
  519. },
  520. show() {
  521. },
  522. /**
  523. * 用户点击右上角分享
  524. */
  525. // #ifdef MP
  526. onShareAppMessage: function() {
  527. let that = this;
  528. that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
  529. return {
  530. title: that.storeInfo.store_name || '',
  531. imageUrl: that.storeInfo.image || '',
  532. path: '/pages/activity/goods_seckill_details/index?id=' + that.id + '&spid=' + that.uid,
  533. }
  534. },
  535. onShareTimeline: function() {
  536. let that = this;
  537. that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
  538. return {
  539. title: that.storeInfo.store_name || '',
  540. query: {
  541. id: that.id,
  542. spid: that.uid
  543. },
  544. imageUrl: that.storeInfo.image || ''
  545. }
  546. },
  547. // #endif
  548. methods: {
  549. call: function(){
  550. let that = this;
  551. if(that.storeInfo.merchant.service_phone){
  552. uni.showModal({
  553. title: '提示',
  554. content: '暂无在线客服,确定拨打客服电话:'+that.storeInfo.merchant.service_phone+'吗?',
  555. success: function(res) {
  556. if (res.confirm) {
  557. uni.makePhoneCall({
  558. phoneNumber: that.storeInfo.merchant.service_phone,
  559. });
  560. }
  561. }
  562. })
  563. }else{
  564. return that.$util.Tips({
  565. title: '暂无可用客服'
  566. })
  567. }
  568. },
  569. goCustomer(){
  570. let that = this;
  571. if (that.isLogin === false) {
  572. toLogin()
  573. } else {
  574. uni.navigateTo({
  575. url: `/pages/chat/customer_list/chat?mer_id=${that.storeInfo.mer_id}&uid=${that.uid}&productId=${that.id}`
  576. });
  577. }
  578. },
  579. goProDetail(item) {
  580. uni.redirectTo({
  581. url: '/pages/goods_details/index?id=' + item.product_id
  582. })
  583. },
  584. //下拉导航页面跳转
  585. linkPage(url) {
  586. if (['/pages/index/index', '/pages/order_addcart/order_addcart',
  587. '/pages/user/index', '/pages/plant_grass/index'
  588. ].indexOf(url) > -1) {
  589. uni.switchTab({
  590. url
  591. })
  592. } else {
  593. uni.navigateTo({
  594. url
  595. })
  596. }
  597. this.currentPage = false
  598. },
  599. /**查看运费说明*/
  600. showShip: function() {
  601. this.$refs.guartemplate.showShippingTel();
  602. },
  603. /**查看服务保障*/
  604. showGuaranee: function() {
  605. this.$refs.guartemplate.showGuaranteeTel();
  606. },
  607. /**查看商品参数*/
  608. seeSpecs() {
  609. this.specsInfo.show = true;
  610. },
  611. mySpecs() {
  612. this.$set(this.specsInfo, 'show', false);
  613. },
  614. /*获取价格说明*/
  615. getPricrRule() {
  616. priceRuleApi(this.storeInfo.cate_id).then(res => {
  617. this.priceRule = res.data
  618. }).catch(err => {
  619. });
  620. },
  621. goActivity: function(e) {
  622. let item = e;
  623. if (item.type === "1") {
  624. uni.navigateTo({
  625. url: `/pages/activity/goods_seckill_details/index?id=${item.id}&status=1`
  626. });
  627. } else if (item.type === "2") {
  628. uni.navigateTo({
  629. url: `/pages/activity/goods_bargain_details/index?id=${item.id}&bargain=${this.uid}`
  630. });
  631. } else {
  632. uni.navigateTo({
  633. url: `/pages/activity/goods_combination_details/index?id=${item.id}`
  634. });
  635. }
  636. },
  637. /**
  638. * 购物车手动填写
  639. *
  640. */
  641. iptCartNum: function(e) {
  642. this.$set(this.attr.productSelect, 'cart_num', e);
  643. },
  644. // 后退
  645. returns: function() {
  646. uni.navigateBack()
  647. },
  648. // 首页
  649. goHome() {
  650. uni.switchTab({
  651. url: '/pages/index/index'
  652. });
  653. },
  654. showNav() {
  655. this.currentPage = !this.currentPage;
  656. },
  657. hideNav() {
  658. this.currentPage = false;
  659. },
  660. tap: function(index) {
  661. var id = "past" + index;
  662. var index = index;
  663. var that = this;
  664. this.$set(this, 'toView', id);
  665. this.$set(this, 'navActive', index);
  666. this.$set(this, 'lock', true);
  667. this.$set(this, 'scrollTop', index > 0 ? that.topArr[index] - (app.globalData.navHeight / 2) : that.topArr[index]);
  668. },
  669. scroll: function(e) {
  670. var that = this,
  671. scrollY = e.detail.scrollTop;
  672. var opacity = scrollY / 200;
  673. opacity = opacity > 1 ? 1 : opacity;
  674. that.$set(that, 'showAnimate', false);
  675. that.$set(that, 'opacity', opacity);
  676. that.$set(that, 'scrollY', scrollY);
  677. if (that.lock) {
  678. that.$set(that, 'lock', false)
  679. return;
  680. }
  681. for (var i = 0; i < that.topArr.length; i++) {
  682. if (scrollY < that.topArr[i] - (app.globalData.navHeight / 2) + that.heightArr[i]) {
  683. that.$set(that, 'navActive', i)
  684. break
  685. }
  686. }
  687. },
  688. /*
  689. * 获取用户信息
  690. */
  691. getUserInfo: function() {
  692. let that = this;
  693. getUserInfo().then(res => {});
  694. },
  695. /**
  696. * 购物车数量加和数量减
  697. *
  698. */
  699. ChangeCartNum: function(changeValue) {
  700. //changeValue:是否 加|减
  701. //获取当前变动属性
  702. let productSelect = this.productValue[this.attrValue];
  703. //如果没有属性,赋值给商品默认库存
  704. if (productSelect === undefined && !this.attr.productAttr.length)
  705. productSelect = this.attr.productSelect;
  706. //无属性值即库存为0;不存在加减;
  707. if (productSelect === undefined) return;
  708. let stock = productSelect.stock || 0;
  709. let num = this.attr.productSelect;
  710. if (changeValue) {
  711. num.cart_num++;
  712. if (num.cart_num > stock) {
  713. this.$set(this.attr.productSelect, "cart_num", stock);
  714. this.$set(this, "cart_num", stock);
  715. }
  716. if(num.cart_num > this.onceCount && this.onceCount>0){
  717. this.$set(this.attr.productSelect, "cart_num", this.onceCount);
  718. this.$set(this, "cart_num", this.onceCount);
  719. return this.$util.Tips({
  720. title: "秒杀时间段内最多购买"+this.onceCount+"件!"
  721. });
  722. }
  723. } else {
  724. num.cart_num--;
  725. if (num.cart_num < 1) {
  726. this.$set(this.attr.productSelect, "cart_num", 1);
  727. this.$set(this, "cart_num", 1);
  728. }
  729. }
  730. },
  731. attrVal(val) {
  732. this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw].attr_values[val.indexn]);
  733. },
  734. /**
  735. * 属性变动赋值
  736. *
  737. */
  738. ChangeAttr: function(res) {
  739. let productSelect = this.productValue[res];
  740. if (productSelect && productSelect.stock > 0) {
  741. this.$set(this.attr.productSelect, "image", productSelect.image);
  742. this.$set(this.attr.productSelect, "price", productSelect.price);
  743. this.$set(this.attr.productSelect, "stock", productSelect.stock);
  744. this.$set(this.attr.productSelect, "unique", productSelect.unique);
  745. this.$set(this.attr.productSelect, "cart_num", 1);
  746. this.$set(this, "attrValue", res);
  747. this.$set(this, "attrTxt", "选择");
  748. } else {
  749. this.$set(this.attr.productSelect, "image", this.storeInfo.image);
  750. this.$set(this.attr.productSelect, "price", this.storeInfo.price);
  751. this.$set(this.attr.productSelect, "stock", 0);
  752. this.$set(this.attr.productSelect, "unique", "");
  753. this.$set(this.attr.productSelect, "cart_num", 0);
  754. this.$set(this, "attrValue", "");
  755. this.$set(this, "attrTxt", "选择");
  756. }
  757. },
  758. setClientHeight: function() {
  759. let that = this;
  760. let view = uni.createSelectorQuery().in(this).select("#list0");
  761. view.fields({
  762. size: true,
  763. }, data => {
  764. that.$set(that, 'clientHeight', data.height + 20)
  765. }).exec();
  766. },
  767. /**
  768. * 获取产品详情
  769. *
  770. */
  771. getGoodsDetails: function() {
  772. uni.showLoading({
  773. title: '加载中',
  774. mask: true
  775. });
  776. let that = this;
  777. getSeckillProductDetail(that.id,{seckill_time_id: that.time_id}).then(async res => {
  778. uni.hideLoading();
  779. let storeInfo = res.data;
  780. if (storeInfo.video_link && storeInfo.slider_image.length > 1) {
  781. this.videoCoverImg = storeInfo.slider_image[0]
  782. storeInfo.slider_image.splice(0, 1)
  783. } else if (storeInfo.video_link && storeInfo.slider_image.length === 1) {
  784. this.videoCoverImg = storeInfo.slider_image[0]
  785. }
  786. that.$set(that, 'storeInfo', storeInfo);
  787. that.$set(that, 'description', storeInfo.content);
  788. that.$set(that, 'reply', res.data.topReply ? [res.data.topReply] : []);
  789. that.$set(that, 'replyCount', res.data.replayData && res.data.replayData.count);
  790. that.$set(that, 'replyChance', res.data.replayData && res.data.replayData.rate);
  791. that.$set(that.attr, 'productAttr', res.data.attr);
  792. that.$set(that, 'productValue', res.data.sku);
  793. that.$set(that, 'onceCount', res.data.once_pay_count);
  794. that.$set(that, 'activity', res.data.activity ? res.data.activity : []);
  795. that.$set(that, 'datatime', res.data.stop ? res.data.stop : []);
  796. that.$set(that, 'guarantee', res.data.guaranteeTemplate ? res.data.guaranteeTemplate : []);
  797. uni.setNavigationBarTitle({
  798. title: storeInfo.store_name.substring(0, 7) + "..."
  799. })
  800. that.$set(that, 'storeImage', that.storeInfo.image);
  801. getProductParmas(that.id).then((res) => {
  802. that.$set(that, 'description', res.data.content);
  803. if (that.description.type == 0) {
  804. that.description.content = that.description.content.replace(
  805. /<img/gi,
  806. '<img style="max-width:100%;height:auto;float:left;display:block" '
  807. );
  808. that.description.content = that.description.content.replace(
  809. /<video/gi,
  810. '<video style="width:100%;height:300px;display:block" '
  811. );
  812. }
  813. that.$set(that, 'shippingValue', res.data.temp ? res.data.temp.name : '');
  814. that.$set(that, 'shipping', res.data.temp ? res.data.temp.info : '');
  815. that.$set(that.specsInfo, 'params', res.data.params);
  816. that.$set(that.storeInfo, 'merchant', res.data.merchant);
  817. that.$set(that.storeInfo, 'spu_id', res.data.spu_id);
  818. that.$set(that.storeInfo, 'community', res.data.community);
  819. that.$set(that.storeInfo, 'top_name', res.data.top_name);
  820. that.$set(that.storeInfo, 'atmosphere_pic', res.data.atmosphere_pic);
  821. })
  822. // #ifdef H5
  823. if (that.isLogin) {
  824. that.getCartCount();
  825. that.ShareInfo();
  826. // that.downloadFilePromotionCode();
  827. };
  828. // #endif
  829. // #ifdef APP-PLUS || MP
  830. that.getCartCount();
  831. // #endif
  832. setTimeout(function() {
  833. that.infoScroll();
  834. }, 500);
  835. that.DefaultSelect();
  836. that.getPricrRule(that.storeInfo.cate_id);
  837. }).catch(err => {
  838. //状态异常返回上级页面
  839. return that.$util.Tips({
  840. title: err
  841. }, {
  842. tab: 3,
  843. url: 1
  844. });
  845. })
  846. },
  847. infoScroll: function() {
  848. var that = this,
  849. topArr = [],
  850. heightArr = [];
  851. for (var i = 0; i < that.navList.length; i++) { //productList
  852. //获取元素所在位置
  853. var query = uni.createSelectorQuery().in(this);
  854. var idView = "#past" + i;
  855. query.select(idView).boundingClientRect();
  856. query.exec(function(res) {
  857. var top = res[0].top;
  858. var height = res[0].height;
  859. topArr.push(top);
  860. heightArr.push(height);
  861. that.$set(that, 'topArr', topArr);
  862. that.$set(that, 'heightArr', heightArr);
  863. });
  864. };
  865. },
  866. /**
  867. * 默认选中属性
  868. *
  869. */
  870. DefaultSelect: function() {
  871. let productAttr = this.attr.productAttr;
  872. let value = [];
  873. let arr = []
  874. let unSortArr = []
  875. for (var key in this.productValue) {
  876. if (this.productValue[key].stock > 0) {
  877. value = this.attr.productAttr.length ? key.split(",") : [];
  878. break;
  879. }
  880. }
  881. for (let i = 0; i < productAttr.length; i++) {
  882. this.$set(productAttr[i], "index", value[i]);
  883. }
  884. //sort();排序函数:数字-英文-汉字;
  885. let productSelect = this.productValue[value.join(",")];
  886. if (productSelect && productAttr.length) {
  887. this.$set(this.attr.productSelect,"store_name", this.storeInfo.store_name);
  888. this.$set(this.attr.productSelect, "image", productSelect.image);
  889. this.$set(this.attr.productSelect, "price", productSelect.price);
  890. this.$set(this.attr.productSelect, "stock", productSelect.stock);
  891. this.$set(this.attr.productSelect, "unique", productSelect.unique);
  892. this.$set(this, "attrValue", value.join(","));
  893. this.$set(this, "attrTxt", "选择");
  894. if (productSelect.stock == 0) {
  895. this.$set(this.attr.productSelect, "cart_num", 0);
  896. } else {
  897. this.$set(this.attr.productSelect, "cart_num", 1);
  898. }
  899. } else if (!productSelect && productAttr.length) {
  900. this.$set(
  901. this.attr.productSelect,
  902. "store_name",
  903. this.storeInfo.store_name
  904. );
  905. this.$set(this.attr.productSelect, "image", this.storeInfo.image);
  906. this.$set(this.attr.productSelect, "price", this.storeInfo.price);
  907. this.$set(this.attr.productSelect, "stock", 0);
  908. this.$set(this.attr.productSelect, "unique", "");
  909. this.$set(this.attr.productSelect, "cart_num", 0);
  910. this.$set(this, "attrValue", "");
  911. this.$set(this, "attrTxt", "选择");
  912. } else if (!productSelect && !productAttr.length) {
  913. this.$set(
  914. this.attr.productSelect,
  915. "store_name",
  916. this.storeInfo.store_name
  917. );
  918. this.$set(this.attr.productSelect, "image", this.storeInfo.image);
  919. this.$set(this.attr.productSelect, "price", this.storeInfo.price);
  920. this.$set(this.attr.productSelect, "stock", this.storeInfo.stock);
  921. this.$set(this.attr.productSelect, "unique", this.storeInfo.unique || "");
  922. this.$set(this.attr.productSelect, "cart_num", 1);
  923. this.$set(this, "attrValue", "");
  924. this.$set(this, "attrTxt", "选择");
  925. } else if (productSelect && !productAttr.length) {
  926. this.$set(this.attr.productSelect, "store_name", this.storeInfo.store_name);
  927. this.$set(this.attr.productSelect, "image", productSelect.image);
  928. this.$set(this.attr.productSelect, "price", productSelect.price);
  929. this.$set(this.attr.productSelect, "stock", productSelect.stock);
  930. this.$set(this.attr.productSelect, "unique", productSelect.unique);
  931. this.$set(this, "attrValue", value.join(","));
  932. this.$set(this, "attrTxt", "选择");
  933. if (productSelect.stock == 0) {
  934. this.$set(this.attr.productSelect, "cart_num", 0);
  935. } else {
  936. this.$set(this.attr.productSelect, "cart_num", 1);
  937. }
  938. }
  939. },
  940. /*
  941. * 单独购买
  942. */
  943. openAlone: function() {
  944. uni.navigateTo({
  945. url: `/pages/goods_details/index?id=${this.storeInfo.old_product_id}`
  946. })
  947. },
  948. /**
  949. *
  950. *
  951. * 收藏商品
  952. */
  953. setCollect: function() {
  954. if (this.isLogin === false) {
  955. toLogin()
  956. } else {
  957. let that = this;
  958. if (this.storeInfo.isRelation) {
  959. collectDel({
  960. type: 1,
  961. type_id: this.id
  962. }).then(res => {
  963. that.$util.Tips({
  964. title: '已取消收藏'
  965. });
  966. that.$set(that.storeInfo, 'isRelation', !that.storeInfo.isRelation);
  967. })
  968. } else {
  969. collectAdd({
  970. type_id: this.id,
  971. type: 1
  972. }).then(res => {
  973. that.$util.Tips({
  974. title: '收藏成功'
  975. });
  976. that.$set(that.storeInfo, 'isRelation', !that.storeInfo.isRelation);
  977. })
  978. }
  979. }
  980. },
  981. /**
  982. * 打开属性插件
  983. */
  984. selecAttr: function() {
  985. this.$set(this.attr, 'cartAttr', true);
  986. this.$set(this, 'isOpen', true);
  987. },
  988. onMyEvent: function() {
  989. this.$set(this.attr, 'cartAttr', false);
  990. this.$set(this, 'isOpen', false);
  991. },
  992. /**
  993. * 打开属性加入购物车
  994. *
  995. */
  996. joinCart: function(e) {
  997. //是否登录
  998. if (this.isLogin === false) {
  999. toLogin()
  1000. } else {
  1001. this.goCat();
  1002. }
  1003. },
  1004. /*
  1005. * 加入购物车
  1006. */
  1007. goCat: function(news) {
  1008. let that = this,
  1009. productSelect = that.productValue[this.attrValue];
  1010. //打开属性
  1011. if (that.attrValue) {
  1012. //默认选中了属性,但是没有打开过属性弹窗还是自动打开让用户查看默认选中的属性
  1013. that.attr.cartAttr = !that.isOpen ? true : false;
  1014. } else {
  1015. if (that.isOpen) that.attr.cartAttr = true;
  1016. else that.attr.cartAttr = !that.attr.cartAttr;
  1017. }
  1018. //只有关闭属性弹窗时进行加入购物车
  1019. if (that.attr.cartAttr === true && that.isOpen === false)
  1020. return (that.isOpen = true);
  1021. //如果有属性,没有选择,提示用户选择
  1022. if (
  1023. that.attr.productAttr.length &&
  1024. that.isOpen === true &&
  1025. productSelect.stock == 0
  1026. )
  1027. return that.$util.Tips({
  1028. title: "产品库存不足,请选择其它"
  1029. });
  1030. let q = {
  1031. is_new: 1,
  1032. product_id: that.id,
  1033. cart_num: that.attr.productSelect.cart_num,
  1034. product_attr_unique: that.attr.productSelect !== undefined ? that.attr.productSelect.unique : "",
  1035. product_type: 1,
  1036. spread_id: this.currSpid
  1037. };
  1038. postCartAdd(q)
  1039. .then(function(res) {
  1040. that.isOpen = false;
  1041. that.attr.cartAttr = false;
  1042. if (news) {
  1043. uni.navigateTo({
  1044. url: '/pages/users/order_confirm/index?cartId=' + res.data.cart_id + '&seckillId=' + that.id
  1045. });
  1046. } else {
  1047. that.$util.Tips({
  1048. title: "添加购物车成功",
  1049. success: () => {
  1050. that.getCartCount(true);
  1051. }
  1052. });
  1053. }
  1054. })
  1055. .catch(res => {
  1056. that.isOpen = false;
  1057. return that.$util.Tips({
  1058. title: res
  1059. });
  1060. });
  1061. },
  1062. /**
  1063. * 获取购物车数量
  1064. * @param boolean 是否展示购物车动画和重置属性
  1065. */
  1066. getCartCount: function(isAnima) {
  1067. let that = this;
  1068. const isLogin = that.isLogin;
  1069. if (isLogin) {
  1070. getCartCounts().then(res => {
  1071. that.CartCount = res.data[0].count;
  1072. //加入购物车后重置属性
  1073. if (isAnima) {
  1074. that.animated = true;
  1075. setTimeout(function() {
  1076. that.animated = false;
  1077. }, 500);
  1078. }
  1079. });
  1080. }
  1081. },
  1082. /**
  1083. * 立即购买
  1084. */
  1085. goBuy: function(e) {
  1086. if (this.isLogin === false) {
  1087. toLogin()
  1088. } else {
  1089. this.goCat(true);
  1090. }
  1091. },
  1092. /**
  1093. * 分享打开
  1094. *
  1095. */
  1096. listenerActionSheet: function() {
  1097. // #ifdef H5
  1098. if (this.$wechat.isWeixin() === true) {
  1099. this.weixinStatus = true;
  1100. }
  1101. // #endif
  1102. this.posters = true;
  1103. },
  1104. // 分享关闭
  1105. listenerActionClose: function() {
  1106. this.posters = false;
  1107. },
  1108. //隐藏海报
  1109. posterImageClose: function() {
  1110. this.posterImageStatus = false
  1111. },
  1112. //替换安全域名
  1113. setDomain: function(url) {
  1114. url = url ? url.toString() : '';
  1115. //本地调试打开,生产请注销
  1116. if (url.indexOf("https://") > -1) return url;
  1117. else return url.replace('http://', 'https://');
  1118. },
  1119. /**
  1120. * 获取产品分销二维码
  1121. * @param function successFn 下载完成回调
  1122. *
  1123. */
  1124. downloadFilePromotionCode() {
  1125. let that = this;
  1126. let type;
  1127. // #ifndef MP
  1128. type = 'wechat'
  1129. // #endif
  1130. // #ifdef MP
  1131. type = 'routine'
  1132. // #endif
  1133. getProductCode(that.id, {
  1134. type: type,
  1135. product_type: 1
  1136. }).then(async res => {
  1137. that.codeImg = res.data.url;
  1138. that.$nextTick(function(){
  1139. that.goPoster();
  1140. })
  1141. }).catch(err => {
  1142. that.$util.Tips({
  1143. title: err
  1144. });
  1145. that.posters = false;
  1146. });
  1147. },
  1148. async imgToBase(url) {
  1149. let res = await imgToBase({
  1150. image: url
  1151. })
  1152. return res.data.image
  1153. },
  1154. // 小程序关闭分享弹窗;
  1155. goFriend: function() {
  1156. this.posters = false;
  1157. },
  1158. /**
  1159. * 生成海报
  1160. */
  1161. async goPoster() {
  1162. if (this.posterImage) {
  1163. this.posterImageStatus = true
  1164. this.posters = false
  1165. return
  1166. }
  1167. let that = this;
  1168. let arr2
  1169. that.posters = false;
  1170. that.$set(that, 'canvasStatus', true);
  1171. uni.showLoading({
  1172. title: '海报生成中',
  1173. mask: true
  1174. });
  1175. // #ifdef MP || APP-PLUS
  1176. arr2 = [that.posterbackgd, await that.fileStoreImage(that.storeImage), await that.fileStoreImage(
  1177. that.codeImg), await that.fileStoreImage(that.share_pic)];
  1178. // #endif
  1179. // #ifdef H5
  1180. arr2 = [that.posterbackgd, await that.imgToBase(that.storeImage), await that.imgToBase(that.codeImg), await that.imgToBase(that.share_pic)];
  1181. // #endif
  1182. that.$util.goodsPosterCanvas(arr2, that.storeInfo.store_name, that.storeInfo.price, that.site_name, that.storeInfo.ot_price, function(tempFilePath) {
  1183. that.$set(that, 'posterImage', tempFilePath);
  1184. that.$set(that, 'posterImageStatus', true);
  1185. that.$set(that, 'canvasStatus', false);
  1186. that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
  1187. }, (err) => {
  1188. that.$set(that, 'canvasStatus', false);
  1189. });
  1190. },
  1191. //图片转符合安全域名路径
  1192. fileStoreImage(url) {
  1193. if(url){
  1194. // #ifdef MP
  1195. let ishttps = url.split('//')[0] == 'https:'
  1196. if (!ishttps) {
  1197. url = 'https://'+url.split('//')[1]
  1198. }
  1199. // #endif
  1200. return new Promise((resolve, reject) => {
  1201. let that = this;
  1202. uni.downloadFile({
  1203. url: url,
  1204. success: function(res) {
  1205. resolve(res.tempFilePath);
  1206. },
  1207. fail: function(error) {
  1208. console.log(error)
  1209. return that.$util.Tips({
  1210. title: '请检查图片地址是否在合法域名内'
  1211. });
  1212. }
  1213. });
  1214. })
  1215. }
  1216. },
  1217. /*
  1218. * 保存到手机相册
  1219. */
  1220. savePosterPath: function() {
  1221. let that = this;
  1222. // #ifdef MP
  1223. uni.getSetting({
  1224. success(res) {
  1225. if (!res.authSetting['scope.writePhotosAlbum']) {
  1226. uni.authorize({
  1227. scope: 'scope.writePhotosAlbum',
  1228. success() {
  1229. uni.saveImageToPhotosAlbum({
  1230. filePath: that.posterImage,
  1231. success: function(res) {
  1232. that.posterImageClose();
  1233. that.$util.Tips({
  1234. title: '保存成功',
  1235. icon: 'success'
  1236. });
  1237. },
  1238. fail: function(res) {
  1239. that.$util.Tips({
  1240. title: '保存失败'
  1241. });
  1242. }
  1243. })
  1244. }
  1245. })
  1246. } else {
  1247. uni.saveImageToPhotosAlbum({
  1248. filePath: that.posterImage,
  1249. success: function(res) {
  1250. that.posterImageClose();
  1251. that.$util.Tips({
  1252. title: '保存成功',
  1253. icon: 'success'
  1254. });
  1255. },
  1256. fail: function(res) {
  1257. that.$util.Tips({
  1258. title: '保存失败'
  1259. });
  1260. },
  1261. })
  1262. }
  1263. }
  1264. })
  1265. // #endif
  1266. // #ifdef APP-PLUS
  1267. uni.saveImageToPhotosAlbum({
  1268. filePath: that.posterImage,
  1269. success: function(res) {
  1270. that.posterImageClose();
  1271. that.$util.Tips({
  1272. title: '保存成功',
  1273. icon: 'success'
  1274. });
  1275. },
  1276. fail: function(res) {
  1277. that.$util.Tips({
  1278. title: '保存失败'
  1279. });
  1280. },
  1281. })
  1282. // #endif
  1283. },
  1284. //复制口令
  1285. copyPwd(){
  1286. let that = this;
  1287. copyPasswordApi({
  1288. id: that.id,
  1289. product_type: 1
  1290. }).then(async res => {
  1291. that.copyUrl = res.data.str;
  1292. that.posters = false
  1293. that.isCopy = true;
  1294. })
  1295. },
  1296. closeCopy(){
  1297. this.isCopy = false
  1298. },
  1299. //#ifdef H5
  1300. ShareInfo() {
  1301. let data = this.storeInfo;
  1302. let href = location.href;
  1303. if (this.$wechat.isWeixin()) {
  1304. getUserInfo().then(res => {
  1305. href =
  1306. href.indexOf("?") === -1 ?
  1307. href + "?spid=" + res.data.uid :
  1308. href + "&spid=" + res.data.uid;
  1309. let configAppMessage = {
  1310. desc: data.store_info,
  1311. title: data.store_name,
  1312. link: href,
  1313. imgUrl: data.image
  1314. };
  1315. this.$wechat.wechatEvevt([
  1316. "updateAppMessageShareData",
  1317. "updateTimelineShareData",
  1318. "onMenuShareAppMessage",
  1319. "onMenuShareTimeline"
  1320. ], configAppMessage).then(res => {}).catch(err => {
  1321. console.log(err);
  1322. })
  1323. });
  1324. }
  1325. },
  1326. //#endif
  1327. },
  1328. }
  1329. </script>
  1330. <style scoped lang="scss">
  1331. .font-bg-red{
  1332. position: relative;
  1333. top: -3rpx;
  1334. background-color: var(--view-theme);
  1335. }
  1336. .product-con .nav {
  1337. background-color: var(--view-theme);
  1338. background-repeat: no-repeat;
  1339. background-size: 100% 100%;
  1340. width: 100%;
  1341. height: 100rpx;
  1342. padding: 0 30rpx;
  1343. box-sizing: border-box;
  1344. }
  1345. .t-color {
  1346. color: var(--view-theme);
  1347. }
  1348. .product-con .nav .money {
  1349. font-size: 28rpx;
  1350. color: #fff;
  1351. }
  1352. .product-con .nav .money .num {
  1353. font-size: 48rpx;
  1354. }
  1355. .product-con .nav .money .y-money {
  1356. font-size: 26rpx;
  1357. margin-left: 10rpx;
  1358. text-decoration: line-through;
  1359. }
  1360. .product-con .nav .time {
  1361. font-size: 20rpx;
  1362. color: #fff;
  1363. text-align: center;
  1364. }
  1365. .product-con .nav .time .timeCon {
  1366. margin-top: 10rpx;
  1367. }
  1368. .product-con .nav .time .timeCon .num {
  1369. padding: 0 7rpx;
  1370. font-size: 22rpx;
  1371. color: #ff3d3d;
  1372. background-color: #fff;
  1373. border-radius: 2rpx;
  1374. }
  1375. .product-con .nav .timeState {
  1376. font-size: 28RPX;
  1377. color: #FFF;
  1378. }
  1379. .product-con .nav .iconfont {
  1380. color: #fff;
  1381. font-size: 30rpx;
  1382. margin-left: 20rpx;
  1383. }
  1384. .product-con .wrapper {
  1385. padding: 32rpx;
  1386. width: 100%;
  1387. box-sizing: border-box;
  1388. }
  1389. .product-con .attribute .params{
  1390. margin-right: 20rpx;
  1391. font-size: 28rpx;
  1392. color: #282828;
  1393. &:nth-child(2){
  1394. margin-right: 0;
  1395. }
  1396. }
  1397. .product-con .wrapper .introduce {
  1398. display: flex;
  1399. align-items: flex-start;
  1400. justify-content: space-between;
  1401. margin-bottom: 30rpx;
  1402. .title{
  1403. width: 650rpx;
  1404. }
  1405. }
  1406. .product-con .wrapper .introduce .infor {
  1407. width: 570rpx;
  1408. }
  1409. .product-con .wrapper .introduce .iconfont {
  1410. font-size: 37rpx;
  1411. color: #515151;
  1412. }
  1413. .product-con .wrapper .label {
  1414. margin: 18rpx 0 0 0;
  1415. font-size: 24rpx;
  1416. color: #82848f;
  1417. }
  1418. .product-con .wrapper .label .stock {
  1419. width: 255rpx;
  1420. margin-right: 28rpx;
  1421. }
  1422. .activity_pin {
  1423. width: auto;
  1424. height: 44rpx;
  1425. line-height: 44rpx;
  1426. background: linear-gradient(90deg, rgba(233, 51, 35, 1) 0%, rgba(250, 101, 20, 1) 100%);
  1427. opacity: 1;
  1428. border-radius: 22rpx;
  1429. padding: 0 15rpx;
  1430. margin-left: 19rpx;
  1431. }
  1432. .activity_miao {
  1433. width: auto;
  1434. height: 44rpx;
  1435. line-height: 44rpx;
  1436. padding: 0 15rpx;
  1437. background: linear-gradient(90deg, rgba(250, 102, 24, 1) 0%, rgba(254, 161, 15, 1) 100%);
  1438. opacity: 1;
  1439. border-radius: 22rpx;
  1440. margin-left: 19rpx;
  1441. }
  1442. .iconfonts {
  1443. color: #fff !important;
  1444. font-size: 28rpx;
  1445. }
  1446. .activity_title {
  1447. font-size: 24rpx;
  1448. color: #fff;
  1449. }
  1450. .activity_kan {
  1451. width: auto;
  1452. height: 44rpx;
  1453. line-height: 44rpx;
  1454. padding: 0 15rpx;
  1455. background: linear-gradient(90deg, rgba(254, 159, 15, 1) 0%, rgba(254, 178, 15, 1) 100%);
  1456. opacity: 1;
  1457. border-radius: 22rpx;
  1458. margin-left: 19rpx;
  1459. }
  1460. .mask {
  1461. z-index: 300 !important;
  1462. }
  1463. .head-bar {
  1464. background: #fff;
  1465. }
  1466. .generate-posters {
  1467. width: 100%;
  1468. height: 170rpx;
  1469. background-color: #fff;
  1470. position: fixed;
  1471. left: 0;
  1472. bottom: 0;
  1473. z-index: 388;
  1474. transform: translate3d(0, 100%, 0);
  1475. transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  1476. border-top: 1px solid #eee;
  1477. }
  1478. .generate-posters.on {
  1479. transform: translate3d(0, 0, 0);
  1480. }
  1481. .generate-posters .item {
  1482. /* #ifdef H5 */
  1483. flex: 50%;
  1484. /* #endif */
  1485. /* #ifndef H5 */
  1486. flex: 33.33%;
  1487. /* #endif */
  1488. text-align: center;
  1489. font-size: 30rpx;
  1490. &.item3{
  1491. flex: 33.33%;
  1492. }
  1493. }
  1494. .generate-posters .item .iconfont {
  1495. font-size: 80rpx;
  1496. color: #5eae72;
  1497. }
  1498. .generate-posters .item .iconfont.icon-haibao {
  1499. color: #5391f1;
  1500. }
  1501. .generate-posters .item .iconfont.icon-fuzhikouling1 {
  1502. color: #FBB324;
  1503. }
  1504. .product-con .mask {
  1505. z-index: 88;
  1506. }
  1507. .product-con .footer {
  1508. padding: 0 20rpx 0 40rpx;
  1509. position: fixed;
  1510. left: 0;
  1511. bottom: 0;
  1512. width: 100%;
  1513. box-sizing: border-box;
  1514. height: 100rpx;
  1515. height: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  1516. height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  1517. background-color: #fff;
  1518. z-index: 277;
  1519. border-top: 1px solid #f0f0f0;
  1520. &.footpl{
  1521. padding-left: 70rpx;
  1522. }
  1523. }
  1524. .product-con .attribute .atterTxt {
  1525. overflow: hidden;
  1526. white-space: nowrap;
  1527. text-overflow: ellipsis;
  1528. display: inline;
  1529. width: 400rpx;
  1530. }
  1531. .product-con .attribute .atterTxt1{
  1532. color: #282828;
  1533. &.hasAttr{
  1534. &:after{
  1535. content: "";
  1536. display: inline-block;
  1537. position: relative;
  1538. top: -6rpx;
  1539. margin: 0 6rpx;
  1540. width: 5rpx;
  1541. height: 5rpx;
  1542. background-color: #282828;
  1543. border-radius: 100%;
  1544. }
  1545. &:last-child{
  1546. &:after{
  1547. display: none;
  1548. }
  1549. }
  1550. }
  1551. }
  1552. .product-con .guaranteeAttr{
  1553. display: inline-block;
  1554. width: 560rpx;
  1555. overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
  1556. }
  1557. .product-con .footer .item {
  1558. font-size: 18rpx;
  1559. color: #666;
  1560. text-align: center;
  1561. }
  1562. .product-con .footer .item .iconfont {
  1563. text-align: center;
  1564. font-size: 40rpx;
  1565. }
  1566. .product-con .footer .item .iconfont.icon-shoucang1 {
  1567. color: var(--view-priceColor);
  1568. }
  1569. .product-con .footer .item .iconfont.icon-gouwuche1 {
  1570. font-size: 40rpx;
  1571. position: relative;
  1572. }
  1573. .product-con .footer .item .iconfont.icon-gouwuche1 .num {
  1574. color: #fff;
  1575. position: absolute;
  1576. font-size: 18rpx;
  1577. padding: 2rpx 8rpx 3rpx;
  1578. border-radius: 200rpx;
  1579. top: -10rpx;
  1580. right: -10rpx;
  1581. }
  1582. .product-con .footer .bnt {
  1583. width: 444rpx;
  1584. height: 76rpx;
  1585. }
  1586. .product-con .footer .bnt .bnts {
  1587. width: 222rpx;
  1588. text-align: center;
  1589. line-height: 76rpx;
  1590. color: #fff;
  1591. font-size: 28rpx;
  1592. }
  1593. .product-con .footer .bnt .joinCart {
  1594. border-radius: 50rpx 0 0 50rpx;
  1595. background-image: linear-gradient(to right, var(--view-bntColor11) 0%, var(--view-bntColor12) 100%);
  1596. }
  1597. .product-con .footer .bnt .buy {
  1598. border-radius: 0 50rpx 50rpx 0;
  1599. background-image: linear-gradient(to right, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
  1600. }
  1601. .product-con .footer .bnt .joinCart[disabled] {
  1602. background: #bbb;
  1603. }
  1604. .product-con .footer .bnt .buy[disabled] {
  1605. background: #bbb;
  1606. }
  1607. .product-con .superior {
  1608. background-color: #fff;
  1609. margin-top: 20rpx;
  1610. padding-bottom: 10rpx;
  1611. }
  1612. .product-con .superior .title {
  1613. height: 98rpx;
  1614. }
  1615. .product-con .superior .title image {
  1616. width: 30rpx;
  1617. height: 30rpx;
  1618. }
  1619. .product-con .superior .title .titleTxt {
  1620. margin: 0 20rpx;
  1621. font-size: 30rpx;
  1622. background-image: linear-gradient(to right, #f57a37 0%, #f21b07 100%);
  1623. -webkit-background-clip: text;
  1624. -webkit-text-fill-color: transparent;
  1625. }
  1626. .product-con .superior .slider-banner {
  1627. width: 690rpx;
  1628. margin: 0 auto;
  1629. position: relative;
  1630. }
  1631. .product-con .superior .slider-banner swiper {
  1632. height: 100%;
  1633. width: 100%;
  1634. }
  1635. .product-con .superior .slider-banner swiper-item {
  1636. height: 100%;
  1637. }
  1638. .product-con .superior .slider-banner .list {
  1639. width: 100%;
  1640. }
  1641. .product-con .superior .slider-banner .list .item {
  1642. width: 215rpx;
  1643. margin: 0 22rpx 30rpx 0;
  1644. font-size: 26rpx;
  1645. }
  1646. .product-con .superior .slider-banner .list .item:nth-of-type(3n) {
  1647. margin-right: 0;
  1648. }
  1649. .product-con .superior .slider-banner .list .item .pictrue {
  1650. position: relative;
  1651. width: 100%;
  1652. height: 215rpx;
  1653. }
  1654. .product-con .superior .slider-banner .list .item .pictrue image {
  1655. width: 100%;
  1656. height: 100%;
  1657. border-radius: 6rpx;
  1658. }
  1659. .product-con .superior .slider-banner .list .item .name {
  1660. color: #282828;
  1661. margin-top: 12rpx;
  1662. }
  1663. .product-con .superior .slider-banner .swiper-pagination-bullet {
  1664. background-color: #999;
  1665. }
  1666. .product-con .superior .slider-banner .swiper-pagination-bullet-active {
  1667. background-color: #e93323;
  1668. }
  1669. button {
  1670. padding: 0;
  1671. margin: 0;
  1672. line-height: normal;
  1673. background-color: #fff;
  1674. }
  1675. button::after {
  1676. border: 0;
  1677. }
  1678. action-sheet-item {
  1679. padding: 0;
  1680. height: 240rpx;
  1681. align-items: center;
  1682. display: flex;
  1683. }
  1684. .contact {
  1685. font-size: 16px;
  1686. width: 50%;
  1687. background-color: #fff;
  1688. padding: 8rpx 0;
  1689. border-radius: 0;
  1690. margin: 0;
  1691. line-height: 2;
  1692. }
  1693. .contact::after {
  1694. border: none;
  1695. }
  1696. .action-sheet {
  1697. font-size: 17px;
  1698. line-height: 1.8;
  1699. width: 50%;
  1700. position: absolute;
  1701. top: 0;
  1702. right: 0;
  1703. padding: 25rpx 0;
  1704. }
  1705. .canvas {
  1706. z-index: 300;
  1707. width: 750px;
  1708. height: 1190px;
  1709. }
  1710. .poster-pop {
  1711. width: 600rpx;
  1712. height: 897rpx;
  1713. position: fixed;
  1714. left: 50%;
  1715. transform: translateX(-50%);
  1716. z-index: 399;
  1717. top: 50%;
  1718. margin-top: -500rpx;
  1719. }
  1720. .poster-pop image {
  1721. width: 100%;
  1722. height: 100%;
  1723. display: block;
  1724. }
  1725. .poster-pop .close {
  1726. width: 46rpx;
  1727. height: 75rpx;
  1728. position: fixed;
  1729. right: 0;
  1730. top: -73rpx;
  1731. display: block;
  1732. }
  1733. .poster-pop .save-poster {
  1734. background-color: #df2d0a;
  1735. font-size: :22rpx;
  1736. color: #fff;
  1737. text-align: center;
  1738. height: 76rpx;
  1739. line-height: 76rpx;
  1740. width: 100%;
  1741. border-radius: 43rpx;
  1742. margin-top: 20rpx;
  1743. }
  1744. .poster-pop .keep {
  1745. color: #fff;
  1746. text-align: center;
  1747. font-size: 25rpx;
  1748. margin-top: 10rpx;
  1749. }
  1750. .mask {
  1751. position: fixed;
  1752. top: 0;
  1753. left: 0;
  1754. right: 0;
  1755. bottom: 0;
  1756. background-color: rgba(0, 0, 0, 0.6);
  1757. z-index: 9;
  1758. }
  1759. .pictrue_log {
  1760. width: 80upx;
  1761. height: 40upx;
  1762. border-radius: 6upx 0 12upx 0;
  1763. line-height: 40upx;
  1764. font-size: 24upx;
  1765. }
  1766. .pictrue_log_class {
  1767. z-index: 3;
  1768. background: -webkit-gradient(linear, left top, right top, from(rgba(246, 122, 56, 1)), to(rgba(241, 27, 9, 1)));
  1769. background: linear-gradient(90deg, rgba(246, 122, 56, 1) 0%, rgba(241, 27, 9, 1) 100%);
  1770. opacity: 1;
  1771. position: absolute;
  1772. top: 0;
  1773. left: 0;
  1774. color: #fff;
  1775. text-align: center;
  1776. }
  1777. .navbar .header {
  1778. height: 96rpx;
  1779. font-size: 30rpx;
  1780. color: #050505;
  1781. background-color: #fff;
  1782. /* #ifdef MP */
  1783. padding-right: 95rpx;
  1784. /* #endif */
  1785. }
  1786. .navbar .header .item {
  1787. position: relative;
  1788. margin: 0 25rpx;
  1789. }
  1790. .navbar .header .item.on:before {
  1791. position: absolute;
  1792. width: 60rpx;
  1793. height: 5rpx;
  1794. background-repeat: no-repeat;
  1795. content: "";
  1796. background-image: linear-gradient(to right, #ff3366 0%, #ff6533 100%);
  1797. bottom: -10rpx;
  1798. left: 50%;
  1799. margin-left: -28rpx;
  1800. }
  1801. .navbar {
  1802. position: fixed;
  1803. background-color: #fff;
  1804. top: 0;
  1805. left: 0;
  1806. z-index: 99;
  1807. width: 100%;
  1808. }
  1809. .navbar .navbarH {
  1810. position: relative;
  1811. }
  1812. .navbar .navbarH .navbarCon {
  1813. position: absolute;
  1814. bottom: 0;
  1815. height: 100rpx;
  1816. width: 100%;
  1817. }
  1818. .share-box {
  1819. z-index: 1000;
  1820. position: fixed;
  1821. left: 0;
  1822. top: 0;
  1823. width: 100%;
  1824. height: 100%;
  1825. image {
  1826. width: 100%;
  1827. height: 100%;
  1828. }
  1829. }
  1830. .store-wrapper {
  1831. margin-top: 20rpx;
  1832. background-color: #fff;
  1833. .store-hd {
  1834. padding: 30rpx;
  1835. border-bottom: 1px solid #F5F5F5;
  1836. .store-info {
  1837. position: relative;
  1838. display: flex;
  1839. .logo {
  1840. width: 86rpx;
  1841. height: 86rpx;
  1842. image {
  1843. width: 86rpx;
  1844. height: 86rpx;
  1845. border-radius: 6rpx;
  1846. }
  1847. }
  1848. .info {
  1849. display: flex;
  1850. flex-direction: column;
  1851. justify-content: center;
  1852. margin-left: 20rpx;
  1853. .name {
  1854. font-size: 28rpx;
  1855. color: #282828;
  1856. font-weight: bold;
  1857. }
  1858. .txt {
  1859. margin-top: 8rpx;
  1860. color: #666666;
  1861. font-size: 22rpx;
  1862. }
  1863. }
  1864. .link {
  1865. position: absolute;
  1866. right: 0;
  1867. top: 50%;
  1868. transform: translateY(-50%);
  1869. display: flex;
  1870. align-items: center;
  1871. justify-content: center;
  1872. width: 114rpx;
  1873. height: 50rpx;
  1874. background-image: linear-gradient(-90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
  1875. border-radius: 25rpx;
  1876. color: #fff;
  1877. }
  1878. }
  1879. .score-wrapper {
  1880. display: flex;
  1881. justify-content: space-between;
  1882. margin-top: 30rpx;
  1883. .item {
  1884. color: #948D8C;
  1885. font-size: 26rpx;
  1886. text {
  1887. margin-left: 10rpx;
  1888. color: var(--view-theme);
  1889. }
  1890. }
  1891. }
  1892. }
  1893. .con-box {
  1894. padding: 20rpx 0 20rpx 30rpx;
  1895. .title {
  1896. font-size: 28rpx;
  1897. color: #282828;
  1898. margin-bottom: 20rpx;
  1899. }
  1900. .img-box {
  1901. display: flex;
  1902. .img-item {
  1903. width: 206rpx;
  1904. margin-right: 15rpx;
  1905. image {
  1906. width: 206rpx;
  1907. height: 206rpx;
  1908. border-radius: 16rpx;
  1909. }
  1910. .txt {
  1911. .title {
  1912. font-size: 28rpx;
  1913. color: #282828;
  1914. }
  1915. .price {
  1916. color: var(--view-priceColor);
  1917. font-size: 28rpx;
  1918. text {
  1919. font-size: 20rpx;
  1920. }
  1921. }
  1922. }
  1923. }
  1924. }
  1925. }
  1926. }
  1927. .sys-head {
  1928. background: transparent;
  1929. }
  1930. .head-wrapper {
  1931. z-index: 999;
  1932. display: flex;
  1933. align-items: center;
  1934. position: fixed;
  1935. left: 30rpx;
  1936. top: 0;
  1937. }
  1938. .head-menu {
  1939. display: flex;
  1940. align-items: center;
  1941. height: 58rpx;
  1942. width: 158rpx;
  1943. background: rgba(255,255,255,0.302);
  1944. border: 2rpx solid rgba(0,0,0,0.0588);
  1945. border-radius: 29rpx;
  1946. .iconfont {
  1947. flex: 1;
  1948. text-align: center;
  1949. color: #000000;
  1950. box-sizing: border-box;
  1951. &.icon-fanhui2 {
  1952. border-right: 1px solid rgba(0,0,0,0.2);;
  1953. }
  1954. }
  1955. }
  1956. </style>