1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194 |
- <template>
- <page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
- <view>
- <view class="product_image_box" v-if="!productInfo.photo_list.length">
- <image class="product_image" :src="sku_thumb"></image>
- </view>
- <view class="product_image_box" v-if="productInfo.photo_list.length">
- <swiper class="photo_list" :autoplay="true">
- <swiper-item v-for="(item,index) in productInfo.photo_list" :key="index">
- <image :src="item.thumb" class="photo_image"></image>
- </swiper-item>
- </swiper>
- </view>
- <view class="product_info">
- <view class="stock_price" v-if="isShowPrice">
- <view class="product_price">
- <text>¥{{productInfo.price}} </text>
- <text class="product_market">¥{{productInfo.market_price}} </text>
- </view>
- </view>
- <view class="product_name">
- <text v-if="productInfo.regiment_title" class="regiment_title">{{productInfo.regiment_title}}</text>
- <text v-if="productInfo.promo_title" class="regiment_title">{{productInfo.promo_title}}</text>
- {{productInfo.name}}
- </view>
- <view class="product_spec">
- <view class="spec_name">{{productInfo.spec}}</view>
- <view class="product_stock">剩{{productInfo.stock}}个</view>
- </view>
- </view>
- <view class="regiment_list" v-if="productInfo.regiment_list.length">
- <view class="regiment_list_title">
- <text class="title1">{{productInfo.regiment_list.length}}人正在拼单</text>
- <text class="title2" @click="openRegiment()">查看更多</text>
- </view>
- <view class="regiment">
- <swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="2000" :duration="2000"
- :circular="true" :vertical="true" :display-multiple-items="2" easing-function="linear">
- <swiper-item v-for="item in productInfo.regiment_list" :key="index">
- <view class="swiper-item">
- <view class="username">
- <image class="user_image" :src="item.userpic"></image>
- <text class="username_text">{{item.username}}</text>
- </view>
- <view class="regiment_right">
- <button class="regiment_but" data-eventsync="true"
- @click="showSpecPopup(4,item.id)">去拼单</button>
- </view>
- <view class="regiment_center">
- <view class="regiment_center_text">还差{{item.surplus_number}}人成团</view>
- <view class="regiment_center_time">
- <view class="center_title">还剩</view>
- <uni-countdown color="#E03519" :show-day="false" :hour="remainder(item.end_time,1)"
- :minute="remainder(item.end_time,2)"
- :second="remainder(item.end_time,3)"></uni-countdown>
- </view>
- </view>
- </view>
- </swiper-item>
- </swiper>
- </view>
- </view>
- <view class="product_business" v-if="productInfo.business_info.name">
- <image class="logopic" :src="productInfo.business_info.logopic"></image>
- <view class="business_info">
- <view class="business_name">
- {{productInfo.business_info.name}}
- </view>
- <view class="business_desc">
- {{productInfo.business_info.desc}}
- </view>
- </view>
- </view>
- <view class="product_description">
- <rich-text :nodes="productInfo.description"></rich-text>
- </view>
- <view class="product_poster" v-if="productInfo.poster">
- <image class="product_image" :src="productInfo.poster" mode="widthFix"></image>
- </view>
- <view class="order_car" v-if="productInfo.regiment_type === 2">
- <navigator url="/pages/car/index" open-type="switchTab" class="to_car">
- <image src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/car.png" class="car_icon"></image>
- </navigator>
- <button class="show_order" data-eventsync="true"
- @click="showSpecPopup(3)">{{this.productInfo.regiment_title}}专享/{{this.productInfo.regiment_price}}</button>
- <button class="show_car" data-eventsync="true"
- @click="showSpecPopup(1)">单独预约/{{this.productInfo.price}}</button>
- </view>
- <view class="order_car" v-else-if="productInfo.regiment_type === 1">
- <navigator url="/pages/car/index" open-type="switchTab" class="to_car">
- <image src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/car.png" class="car_icon"></image>
- </navigator>
- <view class="show_order_regiment" @click="showSpecPopup(4)">
- <view>立即参与多人团拼单</view>
- <view class="regiment_countdown">
- <uni-countdown color="#FFFFFF" :show-day="false"
- :hour="remainder(productInfo.automatic_info.end_time,1)"
- :minute="remainder(productInfo.automatic_info.end_time,2)"
- :second="remainder(productInfo.automatic_info.end_time,3)"></uni-countdown>
- </view>
- </view>
- </view>
- <view class="order_car" v-else>
- <navigator url="/pages/car/index" open-type="switchTab" class="to_car">
- <image src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/car.png" class="car_icon"></image>
- </navigator>
- <button class="show_order" data-eventsync="true" @click="showSpecPopup(1)">立即预约</button>
- <button class="show_car" data-eventsync="true" @click="showSpecPopup(2)">加入购物车</button>
- </view>
- <view class="to_bottom"> --- 到底了 --- </view>
- <uni-popup ref="specPopup" :show="true" type="bottom" class="popup" background-color="#FFFFFF"
- @change="popupChange">
- <view class="order_info">
- <view class="custom_addr" v-if="specBtnType==1 || specBtnType==3 || specBtnType==4"
- @click="showAddrPopup()">
- <view class="contact_user">
- <text class="contact_none" v-if="!checkedAddr.id">请选择收货地址</text>
- <text class="contact_name">{{checkedAddr.contact_name}}</text>
- <text class="contact_phone">{{checkedAddr.contact_phone}}</text>
- <text class="contact_more"> ></text>
- <view class="contact_shop text-ellipsis" style="width: 250rpx; text-align: end">
- <text v-if="checkedAddr.shop_type"> ({{ $CONSTANTS.SHOP_TYPES[checkedAddr.shop_type] }})</text>
- {{checkedAddr.contact_shop}}
- </view>
- </view>
- <view class="contact_addr" style="display: flex;">
- {{checkedAddr.contact_province}} {{checkedAddr.contact_city}} {{checkedAddr.contact_area}}
- {{checkedAddr.contact_addr}}
- </view>
- </view>
- <view class="car_item">
- <view class="box_left">
- <image class="car_image" :src="sku_thumb" mode=""></image>
- </view>
- <view class="box_right">
- <view class="car_name">{{productInfo.name}}</view>
- <view v-if="productInfo.promo_title" class="promo_title">{{productInfo.promo_title}}</view>
- <view class="stock_price">
- <view class="product_price" v-if="isShowPrice">
- <text v-if="specBtnType==1">¥{{productInfo.price}} </text>
- <text v-if="specBtnType==3 || specBtnType==4">¥{{productInfo.regiment_price}} </text>
- <text class="car_market">¥{{productInfo.market_price}}</text>
- </view>
- <view class="product_quantity_box">
- <button class="product_quantity_sub" @click="changeQuantity(-1)" data-eventsync="true">
- <image class="sub_icon" src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/sub_icon.png" mode=""></image>
- </button>
- <input type="number" class="product_quantity" placeholder="数量" v-model="quantity"
- @blur="changeQuantity(0)"></input>
- <button class="product_quantity_add" @click="changeQuantity(+1)" data-eventsync="true">
- <image class="add_icon" src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/add_icon.png" mode=""></image>
- </button>
- </view>
- </view>
- <view class="product_stock">剩{{productInfo.stock}}个</view>
- </view>
- </view>
- <view class="select_sku" v-if="productInfo.product_attr.length">
- <scroll-view scroll-y="true" class="scroll_max">
- <view class="product_attr" v-for="(spec,spec_index) in productInfo.product_attr"
- :key="spec_index">
- <scroll-view scroll-y="true" class="scroll_y">
- <view class="spec_name">{{ spec.spec_name }}</view>
- <view class="arrt_list">
- <view class="arrt_option" :class="option.active?'active':''"
- v-for="(option,attr_index) in spec.attr_list" :key="attr_index"
- @click="attrChange(spec_index,attr_index)">
- <text> {{option.name}}</text> <text
- v-if="option.remark">【{{option.remark}}】</text>
- </view>
- </view>
- </scroll-view>
- </view>
- </scroll-view>
- </view>
- <!-- 选择优惠券 -->
- <view class="to_select_coupon" v-if="specBtnType==1" @click="openCoupon()">
- <text>优惠券</text>
- <view class="coupon_deduction">{{couponUsed}}</view>
- </view>
- <view class="order_price" v-if="specBtnType==1 || specBtnType==3">合计: ¥{{priceTotal}}</view>
- <view class="order_btn">
- <button class="to_order" @click="createOrder()" v-if="specBtnType==1"
- data-eventsync="true">预约</button>
- <button class="to_car" @click="createCart()" v-if="specBtnType==2"
- data-eventsync="true">加入购物车</button>
- <button class="to_order" @click="createOrder()" v-if="specBtnType==3"
- data-eventsync="true">拼团预约</button>
- <button class="to_order" @click="createOrder()" v-if="specBtnType==4"
- data-eventsync="true">{{ productInfo.regiment_title }}预约</button>
- </view>
- </view>
- </uni-popup>
- <uni-popup ref="couponPopup" type="bottom" class="popup" background-color="#FFFFFF">
- <view class="popup_title">优惠券</view>
- <view class="coupon_list">
- <view class="coupon_item" v-for="(item,index) in couponList" @click="checkedCoupon(index,false)"
- :key="index">
- <view class="box_left">
- <view class="rebate" v-if="item.rebate_type == 1"> ¥{{item.rebate}}</view>
- <view class="rebate" v-if="item.rebate_type == 2"> 打 {{item.rebate}} 折</view>
- <view class="rebate" v-if="item.rebate_type == 3"> 赠 <text v-if="item.rebate_scope.length">
- {{item.rebate_scope[0].product_name}}
- </text> </view>
- <view class="std_pay"> 满{{item.std_pay}}</view>
- </view>
- <view class="box_right">
- <view class="coupon_title">
- <view class="coupon_name" v-if="item.rebate_type == 1">满减券</view>
- <view class="coupon_name" v-if="item.rebate_type == 2">折扣券</view>
- <view class="coupon_name" v-if="item.rebate_type == 3">赠品券</view>
- </view>
- <view class="product_scope">
- <text class="" v-if="item.type_id == 1">{{item.is_scope?"当前商品可用":"当前商品不可用"}}</text>
- <text class="" v-if="item.type_id == 2">全场可用</text>
- <text class="" v-if="item.type_id == 3">{{item.is_scope?"当前商品可用":"当前商品不可用"}}</text>
- <view class="check_label">
- <view class="isstd" v-if="!item.is_std">未达标</view>
- <image class="checkbox" v-if="item.is_std"
- :src="item.checked?'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/checked.png':'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/checkbox.png'">
- </image>
- </view>
- </view>
- <view class="coupon_info">
- <view class="coupon_exp">{{item.exp_time}} 到期</view>
- </view>
- </view>
- </view>
- </view>
- </uni-popup>
- <uni-popup ref="addrPopup" type="bottom" class="popup" background-color="#FFFFFF">
- <view class="popup_title">收货地址 <navigator url="/pages/addr/index?notify=addr" class="to_addr_page">管理
- </navigator>
- </view>
- <view class="addr_list">
- <view class="addr_item" v-for="(item,index) in addrList" :key="index" @click="checkedAddrItem(item)">
- <view class="radio_label">
- <image class="radio_icon"
- :src="item.id == checkedAddr.id? 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/radioed.png' : 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/radio.png'">
- </image>
- </view>
- <view class="contact_user">
- <text class="contact_name">{{item.contact_name}}</text>
- <text class="contact_phone">{{item.contact_phone}}</text>
- <text class="contact_default" v-if="item.is_default">默认</text>
- <view class="contact_shop text-ellipsis" style="width: 250rpx; text-align: end">
- <text v-if="item.shop_type">({{ $CONSTANTS.SHOP_TYPES[item.shop_type] }}) </text>
- {{item.contact_shop}}
- </view>
- </view>
- <view class="contact_addr" style="display:flex">
- {{item.contact_province}} {{item.contact_city}} {{item.contact_area}} {{item.contact_addr}}
- </view>
- </view>
- </view>
- <view class="create_box">
- <navigator url="/pages/addr/index?notify=addr&type=create" class="create_addr">新建收货地址</navigator>
- </view>
- </uni-popup>
- <uni-popup ref="addFollow" type="center" class="center_popup" @change="popupChange">
- <view class="add_follow">
- <view class="close_area"><button class="close_btn" @click="closeAddFollow()">关闭</button></view>
- <view class="info_alter">
- <text v-if="follow_linkurl">点击二维码添加客服</text>
- <text v-if="!follow_linkurl">长按二维码添加客服</text>
- </view>
- <view class="qr_code_area" @click="followLinkurl">
- <image v-if="followQrcode" :src="followQrcode" class="qr_code" mode="" show-menu-by-longpress>
- </image>
- </view>
- <view class="rule_info">
- <view class="">报单规则:</view>
- <view class="">1、预约报单需要添加客服人员</view>
- <view class="">2、添加完客服人员后填写小程序当前登录手机号以绑定账号</view>
- <view class="">3、开始预约报单</view>
- </view>
- </view>
- </uni-popup>
- <uni-popup ref="regiment" type="bottom" class="popup" background-color="#FFFFFF">
- <view class="popup_title">可参与的拼单</view>
- <view class="regiment_popup_list">
- <view class="regiment_popup_item" v-for="(item,index) in productInfo.regiment_list"
- @click="checkedCoupon(index,false)" :key="index">
- <view class="username">
- <image class="user_image" :src="item.userpic"></image>
- <text class="username_text">{{item.username}}</text>
- </view>
- <view class="regiment_right">
- <button class="regiment_but" data-eventsync="true"
- @click="showSpecPopup(4,item.id)">去拼单</button>
- </view>
- <view class="regiment_center">
- <view class="regiment_center_text">还差{{item.surplus_number}}人成团</view>
- <view class="regiment_center_time">
- <view class="center_title">还剩</view>
- <uni-countdown color="#E03519" :show-day="false" :hour="remainder(item.end_time,1)"
- :minute="remainder(item.end_time,2)"
- :second="remainder(item.end_time,3)"></uni-countdown>
- </view>
- </view>
- </view>
- </view>
- </uni-popup>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- show: false, // 使用Popup组件时,阻止禁止滚动穿透
- productInfo: {
- id: 0,
- name: "",
- price: "0.00",
- market_price: "0.00",
- spec: "",
- stock: 0,
- thumb: "",
- poster: "",
- description: "",
- regiment_title: '',
- promo_title: '',
- automatic_info: {
- end_time: '',
- },
- regiment_active: [],
- business_info: {
- name: "",
- logopic: "",
- desc: "",
- },
- regiment_price: "0.00",
- regiment_quota: 0,
- regiment_list: [],
- product_attr: [],
- photo_list: [],
- product_sku: [],
- regiment_type: 0,
- regiment_number: 0,
- },
- requestParam: {
- id: 0,
- },
- // 数量
- quantity: 1,
- // 总价
- priceTotal: "0.00",
- // 优惠券列表
- couponList: [],
- // 总价
- priceTotal: '0.00',
- // 优惠券使用
- couponUsed: "去使用 >",
- // 扣减金额
- rebatePrice: 0.00,
- // 已经选择的优惠券ID
- customCoupon: 0,
- // 规格选择按钮类型
- specBtnType: 1, // 1预约。2购物车。3拼团
- // 地址列表
- addrList: [],
- // 已选地址
- checkedAddr: {
- id: 0,
- contact_name: "",
- contact_shop: "",
- contact_phone: "",
- contact_province: "",
- contact_city: "",
- contact_area: "",
- contact_addr: "",
- is_default: 0,
- show_type: 0
- },
- // 客服二维码
- followQrcode: "",
- // 二维码链接
- follow_linkurl: "",
- // 是否登录状态
- isShowPrice: false,
- // 选择的skuid
- sku_id: 0,
- sku_thumb: "",
- regiment_id: 0,
- specBtnType:0,
- }
- },
- onLoad(param) {
- // 接受路由参数,产品ID
- this.requestParam.id = param.product_id;
- // 如果有scene参数的话,获取其中的ID
- if( param.scene ) {
- // 转键值对参数
- let scene = this.$http.strToParam(param.scene);
- // 如果没有传入ID,但是传入了场景ID,获取场景ID
- if( !param.product_id && scene.id ) this.requestParam.id = scene.id;
- }
- var that = this;
- // 监听地址变动
- uni.$on('addr_list_change', function(data) {
- // 地址列表
- that.addrList = data.list;
- });
- // #ifdef MP-WEIXIN
- //分享按钮
- uni.showShareMenu({
- withShareTicket: true,
- menus: ['shareAppMessage', 'shareTimeline']
- })
- // #endif
- },
- onShareAppMessage(obj) {
- return {
- title: this.productInfo.name,
- path: '/pages/product/index?product_id=' + this.productInfo.id
- }
- },
- onShow() {
- // 没有添加客服就不显示
- this.isShowPrice = this.$checkAccess.checkShowPrice();
- // 如果有添加二维码的话,获取客户信息
- if (this.$checkAccess.getFollowQrcode()) {
- // 判断数据
- this.$http.request('api/custom/get_info').then((callback) => {
- if (callback.code == 'success') {
- if (!callback.data.userpic) callback.data.userpic = "https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/doctor.png";
- // 存储登录标识
- uni.setStorageSync('userInfo', callback.data);
- }
- });
- }
- // 如果存在产品ID的话
- if (this.requestParam.id > 0) {
- // 请求详情
- this.$http.request('api/product/get_detail', this.requestParam).then((re) => {
- // 成功渲染数据
- if (re.code == 'success') {
- // 刷新数据
- this.productInfo = re.data;
-
- if (this.productInfo.automatic_info.id) {
- this.regiment_id = this.productInfo.automatic_info.id
- }
- // // 如果有SKU
- // if( this.productInfo.product_sku.length ){
- // // 获取最低的SKU价格数据赋值
- // for (let i in this.productInfo.product_sku) {
- // if( this.productInfo.product_sku[i].price < this.productInfo.price ) {
- // this.productInfo.price = this.productInfo.product_sku[i].price;
- // if( this.productInfo.product_sku[i].market_price != 0 ) this.productInfo.market_price = this.productInfo.product_sku[i].market_price;
- // }
- // }
- // }
- //设置默认sku
- this.sku_id = 0;
- // 显示图片
- this.sku_thumb = this.productInfo.thumb;
- } else {
- if (re.code != 'no_login') {
- uni.showModal({
- content: re.msg,
- showCancel: false,
- })
- }
- }
- });
- }
- },
- methods: {
- //计算剩余时间
- remainder(end_time, type) {
- const now = Math.floor(Date.now() / 1000);
- const distance = end_time - now;
- if (distance < 0) {
- return 0
- }
- const hours = Math.floor(distance / (60 * 60));
- const minutes = Math.floor((distance % (60 * 60)) / (60));
- const seconds = Math.floor((distance % (60)));
- if (type === 1) {
- return hours
- }
- if (type === 2) {
- return minutes
- }
- if (type === 3) {
- return seconds
- }
- },
- // 地址弹出层
- showAddrPopup() {
- // 显示下单弹出层
- this.$refs.addrPopup.open('bottom');
- },
- // 规格弹出层
- showSpecPopup(type, regiment_id = 0) {
- // 登录提示
- if (!this.$checkAccess.alterLogin()) return;
- // 判断是否弹出
- // if (this.$checkAccess.getFollowQrcode()) return this.openAddFollow();
- if (regiment_id) {
- this.regiment_id = regiment_id
- }
- // 显示类型,1预约,2购物车,3拼团
- this.specBtnType = type;
- // 恢复优惠券使用按钮
- this.couponUsed = "去使用 >";
- // 恢复扣减金额
- this.rebatePrice = 0.00;
- // 选择优惠券重置
- this.customCoupon = 0;
- // 计算价格
- this.priceHandler();
- // 显示下单弹出层
- this.$refs.specPopup.open('bottom');
- // 结果
- this.$http.request('api/custom_coupon/get_checked', this.requestParam).then((re) => {
- if (re.code == 'success') {
- // 赋值
- this.couponList = re.data;
- // 优惠券是否可用
- this.checkCoupon();
- }
- });
- // 地址列表
- this.getAddrList();
- //只有一组sku时是否下架
- if (this.productInfo.product_sku.length === 1) {
- this.defaultSkuStatus();
- }
- },
- // 拼团列表弹出层
- openRegiment() {
- this.$refs.regiment.open('bottom')
- },
- // 优惠券弹出层
- openCoupon() {
- this.$refs.couponPopup.open('bottom')
- },
- // 数量调整
- changeQuantity(number) {
- // 如果不是0.表示两侧按钮点击,0表示输入的修改
- if (number != 0) {
- // 计算个数
- this.quantity = parseInt(this.quantity) + parseInt(number);
- }
- // 如果大于库存设置为库存
- if (this.quantity > this.productInfo.stock) {
- this.quantity = this.productInfo.stock;
- uni.showToast({
- title: "库存不足",
- icon: "none"
- })
- }
- if ((this.specBtnType === 3 || this.specBtnType == 4) && this.quantity > this.productInfo.regiment_quota) {
- this.quantity = this.productInfo.regiment_quota;
- uni.showToast({
- title: "拼团限购" + this.productInfo.regiment_quota + "份",
- icon: "none"
- })
- }
- // 如果小于1.设置为1
- if (this.quantity < 1) {
- this.quantity = 1;
- uni.showToast({
- title: "数量不可以小于0",
- icon: "none"
- })
- }
- // 计算价格
- this.priceHandler();
- // 优惠券是否可用
- this.checkCoupon();
- },
- // 创建订单
- createOrder() {
- // 不可预约
- if (!this.$checkAccess.alertCity()) return;
- // 如果有SKU,但是没有选择
- if (this.productInfo.product_sku.length && !this.sku_id) {
- // 选择提示
- let skuname = [];
- // 循环产品属性
- for ( let i in this.productInfo.product_attr) {
- // 属性名称
- skuname.push(this.productInfo.product_attr[i].spec_name);
- }
- uni.showToast({
- title: "请选择"+skuname.join(' 与 '),
- icon: "none"
- })
- return;
- }
- // 下单数量小于0
- if (this.quantity < 1) {
- uni.showToast({
- title: "至少购买1个",
- icon: "none"
- })
- return;
- }
- // 如果大于库存设置为库存
- if (this.productInfo.stock < 1) {
- uni.showToast({
- title: "库存不足",
- icon: "none"
- })
- return;
- }
- // 如果大于库存设置为库存
- if (this.productInfo.stock < this.quantity) {
- this.quantity = this.productInfo.stock;
- uni.showToast({
- title: "库存不足",
- icon: "none"
- })
- return;
- }
- if (this.specBtnType === 3 || this.specBtnType === 4) {
- if (this.quantity > this.productInfo.regiment_quota) {
- this.quantity = this.productInfo.regiment_quota;
- uni.showToast({
- title: "拼团限购" + this.productInfo.regiment_quota + "份",
- icon: "none"
- })
- return;
- }
- const timestamp = Math.round(new Date().getTime() / 1000).toString();
- if (timestamp > this.productInfo.regiment_active.end_time) {
- uni.showToast({
- title: "拼团活动已结束",
- icon: "none"
- })
- return;
- }
- if (this.specBtnType === 4 && timestamp > this.productInfo.automatic_info.end_time) {
- uni.showToast({
- title: "该团已过期",
- icon: "none"
- })
- return;
- }
- }
- // 地址未填
- if (!this.checkedAddr.id) {
- this.showAddrPopup();
- return;
- }
- //需要下单的产品信息参数传给completion页面
- let productInfo = [{
- name: this.productInfo.name,
- spec: this.productInfo.spec,
- price: this.productInfo.price
- }]
- //转成json字符串
- productInfo = JSON.stringify(productInfo);
- //加密json格式成编码数组
- let encodedArray = encodeURIComponent(productInfo);
- // 需要下单的产品列表
- let productList = [{
- product_id: this.productInfo.id,
- buy_num: this.quantity,
- product_skuid: this.sku_id
- }];
- // 转成json字符串传输
- productList = JSON.stringify(productList);
- if (this.specBtnType === 3 || this.specBtnType === 4) { //拼团
- // 请求接口
- this.$http.request('api/orders/create_regiment', {
- "product_list": productList,
- "custom_coupon_id": this.customCoupon,
- 'addr_id': this.checkedAddr.id,
- 'btn_type': this.specBtnType,
- 'regiment_id': this.regiment_id,
- 'regiment_active_id': this.productInfo.regiment_active_id
- }, 'post').then((re) => {
- // 判断结果
- if (re.code == 'success') {
- // 处理结果
- this.productInfo.stock = this.productInfo.stock - this.quantity;
- // 关闭弹窗
- this.$refs.specPopup.close();
- // 跳转到报单完成页面
- uni.navigateTo({
- url: `/pages/orders/completion?params=${encodedArray}`
- });
- } else {
- uni.showModal({
- title: re.msg,
- showCancel: false
- });
- }
- });
- } else {
- // 请求接口
- this.$http.request('api/orders/create', {
- "product_list": productList,
- "custom_coupon_id": this.customCoupon,
- 'addr_id': this.checkedAddr.id
- }, 'post').then((re) => {
- // 判断结果
- if (re.code == 'success') {
- // 处理结果
- this.productInfo.stock = this.productInfo.stock - this.quantity;
- // 关闭弹窗
- this.$refs.specPopup.close();
- // 跳转到报单完成页面
- uni.navigateTo({
- url: `/pages/orders/completion?params=${encodedArray}`
- });
- } else {
- uni.showModal({
- title: re.msg,
- showCancel: false
- });
- }
- });
- }
- },
- // 加入购物车
- createCart() {
- // 不可预约
- if (!this.$checkAccess.alertCity()) return;
- // 如果有SKU,但是没有选择
- if (this.productInfo.product_sku.length && !this.sku_id) {
- // 选择提示
- let skuname = [];
- // 循环产品属性
- for (let i in this.productInfo.product_attr) {
- // 属性名称
- skuname.push(this.productInfo.product_attr[i].spec_name);
- }
- uni.showToast({
- title: "请选择"+skuname.join(' 与 '),
- icon: "none"
- })
- return;
- }
- // 下单数量小于0
- if (this.quantity < 1) {
- uni.showToast({
- title: "至少购买1个"
- })
- return;
- }
- // 如果库存不足
- if (this.productInfo.stock < 1) {
- uni.showToast({
- title: "库存不足",
- icon: "none"
- })
- return;
- }
- // 如果大于库存设置为库存
- if (this.productInfo.stock < this.quantity) {
- this.quantity = this.productInfo.stock;
- uni.showToast({
- title: "库存不足",
- icon: "none"
- })
- return;
- }
- // 商品信息
- let data = {
- product_id: this.productInfo.id,
- buy_num: this.quantity,
- skuid: this.sku_id
- };
- // 请求接口
- this.$http.request('api/shop_cart/add', data, 'post').then((re) => {
- // 判断结果
- if (re.code == 'success') {
- // 跳转到订单列表
- uni.showToast({
- icon: "success",
- title: "加入购物车成功"
- })
- // 关闭结果
- this.$refs.specPopup.close();
- } else {
- // 跳转到订单列表
- uni.showToast({
- icon: "error",
- title: "加入购物车失败"
- })
- }
- });
- },
- // 检查优惠券是否可用
- checkCoupon() {
- // 如果存在的话
- if (this.couponList.length) {
- // 推荐使用的优惠券
- let oldrebatePrice = 0.00;
- let hasIsStd = false;
- // 循环优惠券
- for (let i in this.couponList) {
- /* 商品的总价格,决定是否可用 */
- let totalPrice = 0.00;
- // 如果是商品券
- if (this.couponList[i].type_id == 1) {
- // 判断商品是不是在商品范围
- let isScope = false;
- // 循环商品范围
- for (let k in this.couponList[i].product_scope) {
- // 如果存在商品范围
- if (this.couponList[i].product_scope[k].product_id == this.productInfo.id) isScope = true;
- }
- // 范围内的做计算
- if (isScope) totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.productInfo
- .price, this.quantity));
- // 是否在可用范围
- this.couponList[i].is_scope = isScope;
- // 排除券
- } else if (this.couponList[i].type_id == 3) {
- // 判断商品是不是在商品范围
- let isScope = true;
- // 循环排除范围
- for (let k in this.couponList[i].product_exclude) {
- // 如果在排除范围
- if (this.couponList[i].product_exclude[k].product_id == this.productInfo.id) isScope =
- false;
- }
- // 范围内的做计算
- if (isScope) totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.productInfo
- .price, this.quantity));
- // 是否在可用范围
- this.couponList[i].is_scope = isScope;
- // 店铺券
- } else {
- // 店铺券
- totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.productInfo.price, this
- .quantity));
- // 是否在可用范围
- this.couponList[i].is_scope = true;
- }
- // 判断价格到不到限额
- this.couponList[i].is_std = parseFloat(totalPrice.toFixed()) >= parseFloat(this.$decimal.mul(this
- .couponList[i].std_pay, 1).toFixed());
- // 如果不可用的话,该项已选择则不选
- if (!this.couponList[i].is_std && this.couponList[i].checked) this.checkedCoupon(i, false);
- // 如果可用的话,并且优惠券没有选中
- if (this.couponList[i].is_std) {
- // 优惠金额
- let newRebatePrice = 0.00;
- // 计算满减价格
- if (this.couponList[i].rebate_type == 1) {
- // 计算扣减数据
- newRebatePrice = this.$decimal.mul(this.couponList[i].rebate, 1);
- }
- // 计算折扣价格
- if (this.couponList[i].rebate_type == 2) {
- // 折扣
- newRebatePrice = this.$decimal.mul(totalPrice, this.couponList[i].rebate);
- // 减数
- newRebatePrice = this.$decimal.sub(totalPrice, newRebatePrice.mul(0.1));
- }
- // 判断哪个比较优惠
- if (parseFloat(oldrebatePrice.toFixed(2)) <= parseFloat(newRebatePrice.toFixed(2))) {
- // 覆盖价格
- oldrebatePrice = parseFloat(newRebatePrice.toFixed(2));
- // 如果选中的是自己,不需要取消
- if (this.customCoupon == this.couponList[i].id && this.couponList[i].checked) {
- // 选中
- this.checkedCoupon(i, true);
- } else {
- // 选中
- this.checkedCoupon(i, false);
- }
- }
- }
- }
- }
- },
- // 选择优惠券
- checkedCoupon(index, save_checked = false) {
- // 单个设置选中/未选(如果保持选中,则不变)
- this.couponList[index].checked = save_checked ? this.couponList[index].checked : (this.couponList[index]
- .checked ? 0 : 1);
- // 循环处理
- for (let i in this.couponList) {
- // 有未选的就不做全选
- if (index != i) this.couponList[i].checked = 0;
- }
- // 如果未选中,提示可用
- if (!this.couponList[index].checked) this.couponUsed = '去使用 >';
- // 已经选择的优惠券ID
- this.customCoupon = this.couponList[index].checked ? this.couponList[index].id : 0;
- // 计算扣减
- this.couponRebate();
- // 计算价格
- this.priceHandler();
- // 关闭弹窗
- this.$refs.couponPopup.close();
- },
- // 计算价格
- priceHandler() {
- // 总价格
- let priceTotal = 0
- if (this.specBtnType == 3) {
- priceTotal = this.$decimal.mul(this.productInfo.regiment_price, this.quantity);
- } else {
- priceTotal = this.$decimal.mul(this.productInfo.price, this.quantity);
- }
- // 扣减数据
- priceTotal = priceTotal.sub(this.rebatePrice);
- // 小数点保留
- this.priceTotal = priceTotal.toFixed(2);
- },
- // 计算优惠券扣减
- couponRebate() {
- // 默认扣减0
- this.rebatePrice = 0;
- // 循环优惠券
- for (let i in this.couponList) {
- // 判断是否选中
- if (this.couponList[i].id != this.customCoupon) {
- // 未选择的不管
- continue;
- }
- /* 商品的总价格,决定是否可用 */
- var totalPrice = 0.00;
- // 如果是商品券
- if (this.couponList[i].type_id == 1) {
- // 判断商品是不是在商品范围
- var isScope = false;
- // 循环商品范围
- for (let k in this.couponList[i].product_scope) {
- // 如果存在商品范围
- if (this.couponList[i].product_scope[k].product_id == this.productInfo.id) isScope = true;
- }
- // 范围内的做计算
- if (isScope) totalPrice = this.$decimal.mul(this.productInfo.price, this.quantity);
- // 排除券
- } else if (this.couponList[i].type_id == 3) {
- // 判断商品是不是在商品范围
- var isScope = true;
- // 循环排除范围
- for (let k in this.couponList[i].product_exclude) {
- // 如果存在排除范围
- if (this.couponList[i].product_exclude[k].product_id == this.productInfo.id) isScope = false;
- }
- // 范围内的做计算
- if (isScope) totalPrice = this.$decimal.mul(this.productInfo.price, this.quantity);
- // 店铺券
- } else {
- // 折扣券以及满减券的话,计算价格
- totalPrice = this.$decimal.mul(this.productInfo.price, this.quantity);
- }
- // 如果是可以用的话
- if (parseFloat(totalPrice.toFixed()) >= parseFloat(this.$decimal.mul(this.couponList[i].std_pay, 1)
- .toFixed())) {
- // 扣减金额
- let rebatePrice = this.$decimal.mul(1, 0);
- // 满减
- if (this.couponList[i].rebate_type == 1) {
- // 计算扣减数据
- rebatePrice = this.$decimal.mul(this.couponList[i].rebate, 1);
- // 替换文字
- this.couponUsed = "¥-" + rebatePrice.toFixed(2);
- }
- // 折扣
- if (this.couponList[i].rebate_type == 2) {
- // 折扣
- rebatePrice = this.$decimal.mul(totalPrice, this.couponList[i].rebate);
- // 减数
- rebatePrice = this.$decimal.sub(totalPrice, rebatePrice.mul(0.1));
- // 替换文字
- this.couponUsed = "¥-" + rebatePrice.toFixed(2);
- }
- // 赠品
- if (this.couponList[i].rebate_type == 3) {
- // 替换文字
- this.couponUsed = "送" + (this.couponList[i].rebate_scope.length ? this.couponList[i]
- .rebate_scope[0].product_name : "");
- }
- // 小数点保留
- this.rebatePrice = rebatePrice.toFixed(2);
- }
- }
- },
- popupChange(e) {
- // 禁止滚动穿透
- this.show = e.show
- },
- // 选择地址
- checkedAddrItem(item) {
- this.checkedAddr = item;
- this.$refs.addrPopup.close();
- },
- getAddrList() {
- // 判断数据
- this.$http.request('api/custom_addr/get_list').then((callback) => {
- // 获取成功
- if (callback.code == 'success') {
- this.addrList = callback.data;
- // 如果有的话
- if (this.addrList.length) {
- // 获取默认的
- for (let i in this.addrList) {
- // 如果是默认的
- if (this.addrList[i].is_default) this.checkedAddr = this.addrList[i];
- }
- // 如果没有默认的话
- if (!this.checkedAddr.id) {
- this.checkedAddr = this.addrList[this.addrList.length - 1];
- }
- }
- }
- });
- },
- // 客服显示
- openAddFollow() {
- // 返回结果
- this.followQrcode = this.$checkAccess.getFollowQrcode();
- // 返回结果
- this.follow_linkurl = this.$checkAccess.getFollowLinkUrl();
- // 有图才展示
- if (this.followQrcode) this.$refs.addFollow.open('center');
- },
- closeAddFollow() {
- this.$refs.addFollow.close();
- },
- // 属性变更
- attrChange(spec_index, attr_index) {
- // 判断当前属性是否选择。选择的跳过
- if (this.productInfo.product_attr[spec_index].attr_list[attr_index].active) return;
- // 先记录当前规格下所有属性原来的active状态
- let originalActiveStates = {};
- for (let i in this.productInfo.product_attr[spec_index].attr_list) {
- originalActiveStates[i] = this.productInfo.product_attr[spec_index].attr_list[i].active;
- }
- //循环规格下的属性
- for (let i in this.productInfo.product_attr[spec_index].attr_list) {
- // 全部改为未选中
- this.productInfo.product_attr[spec_index].attr_list[i].active = 0;
- }
- //选择选项
- this.productInfo.product_attr[spec_index].attr_list[attr_index].active = 1;
- //选中的规格
- var attr_ids = [];
- // 循环规格
- for (let i in this.productInfo.product_attr) {
- // 再循环属性
- for (let j in this.productInfo.product_attr[i].attr_list) {
- // 如果选中的
- if (this.productInfo.product_attr[i].attr_list[j].active) {
- attr_ids.push(this.productInfo.product_attr[i].attr_list[j].id);
- }
- }
- }
- // 转成字符串
- var attrids = attr_ids.join(",");
- // 如果选项不足的话
- if (attr_ids.length != this.productInfo.product_attr.length) return;
- // 如果当前点击的属性对应的SKU状态为未下架(初始化为0)
- let currentSKUStatus = 0;
- // 匹配规格
- if (this.productInfo.product_sku.length) {
- // 是否有对应的SKU
- let haveSku = 0;
- // 循环sku
- for (let i in this.productInfo.product_sku) {
- // 如果sku不匹配
- if (this.productInfo.product_sku[i].attr_ids != attrids) continue;
- // 设置有SKU
- haveSku = 1;
- // 获取当前匹配到的SKU的状态
- currentSKUStatus = this.productInfo.product_sku[i].status;
- // 如果商品已经下架(status等于1),则恢复当前规格下所有属性原来的active状态
- if (currentSKUStatus === 1) {
- uni.showToast({
- title: "该规格已下架",
- icon: "none"
- });
- for (let k in originalActiveStates) {
- this.productInfo.product_attr[spec_index].attr_list[k].active = originalActiveStates[k];
- }
- continue;
- }
- // 如果商品没有库存
- if (this.productInfo.product_sku[i].stock <= 0) {
- uni.showToast({
- title: "该规格库存不足",
- icon: "none"
- });
- for (let k in originalActiveStates) {
- this.productInfo.product_attr[spec_index].attr_list[k].active = originalActiveStates[k];
- }
- continue;
- }
- // 产品价格修改
- this.productInfo.price = this.productInfo.product_sku[i].price;
- // 产品价格修改
- if( this.productInfo.product_sku[i].market_price != 0.00 ) this.productInfo.market_price = this.productInfo.product_sku[i].market_price;
- // 产品规格修改
- this.productInfo.spec = this.productInfo.product_sku[i].attr_names;
- // 产品库存
- this.productInfo.stock = this.productInfo.product_sku[i].stock;
- // 产品SKU
- this.sku_id = this.productInfo.product_sku[i].id;
- // 有图替换,没图使用产品原缩略图
- this.sku_thumb = this.productInfo.product_sku[i].sku_thumb ? this.productInfo.product_sku[i]
- .sku_thumb : this.productInfo.thumb;
- // 如果有图册
- if (this.productInfo.photo_list.length) {
- this.productInfo.photo_list[0].thumb = this.sku_thumb;
- }
- // 计算价格
- this.priceHandler();
- // 优惠券是否可用
- this.checkCoupon();
- }
- // 如果没有对应的SKU
- if (!haveSku) {
- uni.showToast({
- title: "该规格已下架",
- icon: "none"
- });
- for (let k in originalActiveStates) {
- this.productInfo.product_attr[spec_index].attr_list[k].active = originalActiveStates[k];
- }
- }
- }
- },
- //只有一组sku默认规格是否已下架
- defaultSkuStatus() {
- if (this.productInfo.product_sku.length) {
- if (this.productInfo.product_sku[0].status === 1) {
- uni.showToast({
- title: "该规格已下架",
- icon: "none",
- });
- this.productInfo.stock = 0;
- var attr_ids = this.productInfo.product_sku[0].attr_ids.split(",");
- // 循环规格列表
- for (let i in this.productInfo.product_attr) {
- // 再循环属性
- for (let j in this.productInfo.product_attr[i].attr_list) {
- // 如果不等于id
- if (attr_ids.includes(this.productInfo.product_attr[i].attr_list[j].id + '')) {
- // 取消选中
- this.productInfo.product_attr[i].attr_list[j].active = 0;
- }
- }
- }
- return;
- }
- }
- },
- // 去往webview
- followLinkurl() {
- // 获取登录标识
- let userInfo = uni.getStorageSync('userInfo');
- // 如果不存在的话
- if (!userInfo) return '';
- // 未添加好友
- if (!userInfo.follow_linkurl) return '';
- // 获取Url
- let url = userInfo.follow_linkurl;
- // 没有路径,不跳转
- if (!url) return;
- // 判断是不是小程序链接
- if (url.includes('http')) {
- // 转码
- let link_url = encodeURIComponent(url);
- // 跳转到webview
- uni.redirectTo({
- url: `/pages/webview/index?link_url=${link_url}`
- })
- } else {
- // 跳转到webview
- uni.navigateTo({
- url: url
- });
- }
- }
- }
- }
- </script>
- <style lang="less">
- .product_image_box {
- display: block;
- overflow: hidden;
- background: #FFFFFF;
- margin: 10rpx auto;
- .product_image {
- display: block;
- margin: 0 auto;
- width: 750rpx;
- height: 750rpx;
- }
- .photo_list {
- display: block;
- width: 750rpx;
- height: 750rpx;
- line-height: 750rpx;
- text-align: center;
- .photo_image {
- width: 750rpx;
- height: 750rpx;
- }
- }
- }
- .product_info {
- display: block;
- background: #FFFFFF;
- margin: 10rpx 0rpx;
- padding: 10px 10px;
- .product_name {
- max-height: 80rpx;
- font-size: 30rpx;
- line-height: 40rpx;
- overflow: hidden;
- padding: 10rpx 0rpx;
- .regiment_title {
- background-color: red;
- color: #F9F9F9;
- }
- }
- .product_spec {
- color: #999999;
- font-size: 24rpx;
- line-height: 30rpx;
- overflow: hidden;
- .spec_name {
- float: left;
- }
- .product_stock {
- float: right;
- }
- }
- .stock_price {
- font-size: 20rpx;
- overflow: hidden;
- margin-top: 10rpx;
- line-height: 30rpx;
- .product_price {
- float: left;
- color: red;
- font-size: 38rpx;
- line-height: 60rpx;
- .product_market {
- font-size: 24rpx;
- color: #999999;
- line-height: 30rpx;
- margin-left: 10rpx;
- text-decoration: line-through;
- }
- }
- }
- }
- // 描述简介
- .product_business {
- display: block;
- overflow: hidden;
- padding: 20rpx 20rpx;
- margin: 10rpx auto;
- background: #FFFFFF;
- .logopic {
- float: left;
- width: 80rpx;
- height: 80rpx;
- border-radius: 50%;
- margin-right: 20rpx;
- }
- .business_info {
- float: left;
- width: 600rpx;
- overflow: hidden;
- .business_name {
- font-size: 26rpx;
- line-height: 40rpx;
- }
- .business_desc {
- color: #999999;
- font-size: 24rpx;
- line-height: 40rpx;
- }
- }
- }
- .product_description {
- width: 700rpx;
- display: block;
- overflow: hidden;
- background: #FFFFFF;
- min-height: 600rpx;
- font-size: 26rpx;
- margin: 0rpx auto;
- line-height: 50rpx;
- padding: 10rpx 25rpx;
- [alt] {
- //web_view图片
- max-width: 100%; // 避免图片超宽
- vertical-align: bottom; // 避免图片之间间隙
- }
- }
- .product_poster {
- display: block;
- overflow: hidden;
- padding: 10rpx 0rpx;
- margin: 10rpx auto;
- background: #FFFFFF;
- .product_image {
- width: 750rpx;
- display: block;
- }
- }
- .order_car {
- left: 0rpx;
- width: 750rpx;
- height: 140rpx;
- display: block;
- position: fixed;
- padding-top: 20rpx;
- background: #FFFFFF;
- bottom: var(--window-bottom);
- border-top: 2rpx solid #DDDDDD;
- .show_order {
- float: right;
- width: 280rpx;
- height: 80rpx;
- display: block;
- color: #FFFFFF;
- font-size: 30rpx;
- overflow: hidden;
- line-height: 80rpx;
- padding: 0rpx 0rpx;
- text-align: center;
- margin-right: 35rpx;
- background-color: #E03519;
- border-radius: 0rpx;
- border-top-right-radius: 20rpx;
- border-bottom-right-radius: 20rpx;
- }
- .show_order_regiment {
- float: right;
- width: 280rpx;
- height: 80rpx;
- display: block;
- color: #FFFFFF;
- font-size: 25rpx;
- overflow: hidden;
- padding: 0rpx 0rpx;
- text-align: center;
- margin-right: 35rpx;
- background-color: #E03519;
- border-radius: 20rpx;
- .regiment_countdown {
- padding-left: 50rpx;
- }
- }
- .show_car {
- float: right;
- width: 280rpx;
- height: 80rpx;
- display: block;
- color: #FFFFFF;
- font-size: 30rpx;
- overflow: hidden;
- line-height: 80rpx;
- padding: 0rpx 0rpx;
- text-align: center;
- background-color: #F59A23;
- border-radius: 0rpx;
- border-top-left-radius: 20rpx;
- border-bottom-left-radius: 20rpx;
- }
- .to_car {
- float: left;
- width: 100rpx;
- height: 60rpx;
- display: block;
- text-align: center;
- margin-left: 35rpx;
- padding-top: 10rpx;
- .car_icon {
- float: left;
- width: 60rpx;
- height: 60rpx;
- display: block;
- }
- }
- }
- .popup {
- overflow: hidden;
- .popup_title {
- display: block;
- overflow: hidden;
- margin: 0rpx auto;
- font-size: 36rpx;
- height: 120rpx;
- line-height: 120rpx;
- padding: 0rpx 20rpx;
- border-bottom: 10rpx solid #F8F8F8;
- .to_addr_page {
- float: right;
- color: #F59A23;
- display: block;
- height: 120rpx;
- line-height: 120rpx;
- font-size: 26rpx;
- padding: 0rpx 10rpx;
- }
- }
- .order_info {
- overflow: hidden;
- background: #FFFFFF;
- .custom_addr {
- width: 680rpx;
- display: block;
- font-size: 24rpx;
- overflow: hidden;
- margin: 0rpx auto;
- line-height: 40rpx;
- padding: 20rpx 35rpx;
- background-color: #FFFFFF;
- border-bottom: 2rpx solid #dddddd;
- .contact_user {
- display: block;
- font-size: 24rpx;
- line-height: 50rpx;
- .contact_none {
- font-size: 26rpx;
- font-weight: bold;
- }
- .contact_name {
- font-size: 26rpx;
- font-weight: bold;
- margin-right: 16rpx;
- }
- .contact_shop {
- float: right;
- font-size: 26rpx;
- margin-right: 16rpx;
- }
- .contact_more {
- float: right;
- font-size: 40rpx;
- font-weight: bold;
- }
- }
- .contact_addr {
- width: 620rpx;
- display: block;
- font-size: 24rpx;
- line-height: 30rpx;
- padding: 10rpx 5rpx;
- }
- }
- .car_item {
- height: 200rpx;
- display: block;
- background: #FFFFFF;
- margin: 20rpx auto;
- .box_left {
- float: left;
- width: 160rpx;
- height: 200rpx;
- margin-left: 35rpx;
- .car_image {
- width: 160rpx;
- height: 160rpx;
- margin: 20rpx 0rpx;
- border-radius: 5rpx;
- }
- }
- .box_right {
- float: left;
- width: 485rpx;
- margin-left: 35rpx;
- padding-top: 20rpx;
- .car_name {
- max-height: 80rpx;
- font-size: 30rpx;
- line-height: 40rpx;
- overflow: hidden;
- padding: 0rpx 0rpx;
- }
- .promo_title{
- max-height: 80rpx;
- font-size: 20rpx;
- line-height: 40rpx;
- overflow: hidden;
- padding: 0rpx 0rpx;
- color: #dd524d;
- }
- .car_spec {
- color: #999999;
- font-size: 24rpx;
- line-height: 30rpx;
- padding: 0rpx 0rpx;
- }
- .stock_price {
- width: 485rpx;
- color: #dddddd;
- font-size: 20rpx;
- overflow: hidden;
- margin-top: 10rpx;
- line-height: 30rpx;
- .product_price {
- float: left;
- color: red;
- font-size: 30rpx;
- line-height: 60rpx;
- .car_market {
- font-size: 24rpx;
- color: #999999;
- line-height: 30rpx;
- vertical-align: middle;
- text-decoration: line-through;
- }
- }
- .product_quantity_box {
- float: right;
- color: #333333;
- overflow: hidden;
- font-size: 24rpx;
- margin-top: 10rpx;
- text-align: center;
- .product_quantity_sub {
- float: left;
- border: none;
- height: 36rpx;
- background: none;
- text-align: center;
- line-height: 36rpx;
- padding: 10rpx 10rpx;
- .sub_icon {
- width: 22rpx;
- height: 22rpx;
- display: block;
- }
- }
- .product_quantity_sub::after {
- border: none;
- background: none;
- }
- .product_quantity {
- float: left;
- width: 100rpx;
- height: 36rpx;
- font-size: 24rpx;
- min-height: 36rpx;
- line-height: 36rpx;
- padding: 0rpx 0rpx;
- border-radius: 8rpx;
- border: 2rpx solid #dddddd;
- }
- .product_quantity_add {
- float: left;
- border: none;
- height: 36rpx;
- background: none;
- text-align: center;
- padding: 10rpx 10rpx;
- line-height: 36rpx;
- .add_icon {
- width: 22rpx;
- height: 22rpx;
- display: block;
- }
- }
- .product_quantity_add::after {
- border: none;
- background: none;
- }
- }
- }
- .product_stock {
- font-size: 20rpx;
- line-height: 60rpx;
- }
- }
- }
- .select_sku {
- font-size: 28rpx;
- padding: 20rpx 35rpx;
- margin-bottom: 10rpx;
- .scroll_max {
- height: 440rpx;
- .product_attr {
- display: block;
- overflow: hidden;
- margin-bottom: 20rpx;
- .spec_name {
- display: block;
- height: 40rpx;
- font-size: 28rpx;
- line-height: 40rpx;
- }
- .arrt_list {
- display: block;
- overflow: hidden;
- background-color: #F5F5F5;
- .arrt_option {
- float: left;
- font-size: 28rpx;
- line-height: 40rpx;
- text-align: center;
- border-radius: 6rpx;
- padding: 10rpx 20rpx;
- margin: 10rpx 0rpx;
- margin-right: 20rpx;
- background-color: #EEEEEE;
- }
- .arrt_option.active {
- color: #FFFFFF;
- background-color: #fE6000;
- }
- }
- }
- }
- }
- .to_select_coupon {
- font-size: 28rpx;
- padding: 10rpx 35rpx;
- margin-bottom: 10rpx;
- .coupon_deduction {
- color: red;
- float: right;
- }
- }
- .order_price {
- font-size: 28rpx;
- text-align: right;
- margin: 0rpx 35rpx;
- padding: 10rpx 0rpx;
- border-top: 2rpx solid #DDDDDD;
- .coupon_deduction {
- color: red;
- float: right;
- }
- }
- .order_btn {
- width: 700rpx;
- height: 100rpx;
- display: block;
- margin: 0 auto;
- margin-top: 20rpx;
- line-height: 80rpx;
- text-align: center;
- font-size: 30rpx;
- .to_car {
- color: #FFFFFF;
- float: right;
- width: 700rpx;
- height: 80rpx;
- display: block;
- overflow: hidden;
- font-size: 30rpx;
- line-height: 80rpx;
- padding: 0rpx 0rpx;
- border-radius: 40rpx;
- border: 0rpx solid transparent;
- background-color: #F59A23;
- }
- .to_car::after {
- border: 0rpx solid transparent;
- }
- .to_order {
- color: #FFFFFF;
- float: right;
- width: 700rpx;
- height: 80rpx;
- display: block;
- font-size: 30rpx;
- overflow: hidden;
- line-height: 80rpx;
- padding: 0rpx 0rpx;
- border-radius: 40rpx;
- background-color: #E03519;
- border: 0rpx solid transparent;
- }
- .to_order::after {
- border: 0rpx solid transparent;
- }
- }
- }
- .coupon_list {
- display: block;
- overflow: hidden;
- min-height: 600rpx;
- margin: 10rpx auto;
- background: #FFFFFF;
- padding-bottom: 50rpx;
- .coupon_item {
- height: 200rpx;
- display: block;
- margin: 10rpx auto;
- border-bottom: 2rpx solid #DDDDDD;
- .box_left {
- float: left;
- width: 160rpx;
- height: 160rpx;
- font-size: 20rpx;
- text-align: center;
- margin-left: 35rpx;
- line-height: 60rpx;
- margin-top: 20rpx;
- background: pink;
- .rebate {
- width: 120rpx;
- height: 60rpx;
- margin: 0rpx auto;
- line-height: 60rpx;
- margin-top: 20rpx;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- }
- .box_right {
- float: left;
- width: 485rpx;
- margin-left: 35rpx;
- padding-top: 20rpx;
- .coupon_title {
- width: 485rpx;
- max-height: 80rpx;
- font-size: 30rpx;
- overflow: hidden;
- line-height: 40rpx;
- padding: 0rpx 0rpx;
- .coupon_name {
- float: left;
- height: 40rpx;
- width: 380rpx;
- }
- .coupon_status {
- width: 85rpx;
- float: right;
- color: #999999;
- font-size: 24rpx;
- }
- }
- .product_scope {
- width: 485rpx;
- height: 80rpx;
- color: #999999;
- font-size: 24rpx;
- overflow: hidden;
- line-height: 80rpx;
- .check_label {
- float: right;
- display: block;
- overflow: hidden;
- padding: 20rpx 20rpx;
- .isstd {
- line-height: 40rpx;
- }
- .checkbox {
- float: right;
- width: 40rpx;
- height: 40rpx;
- }
- }
- }
- .coupon_info {
- width: 485rpx;
- max-height: 80rpx;
- font-size: 30rpx;
- overflow: hidden;
- line-height: 40rpx;
- padding: 0rpx 0rpx;
- .coupon_exp {
- float: left;
- font-size: 20rpx;
- }
- }
- }
- }
- .coupon_item:last-child {
- border-bottom: none;
- }
- }
- .addr_list {
- width: 730rpx;
- display: block;
- overflow: hidden;
- margin: 0rpx auto;
- min-height: 500rpx;
- .addr_item {
- display: block;
- font-size: 24rpx;
- overflow: hidden;
- line-height: 40rpx;
- padding: 15rpx 10rpx;
- border-radius: 15rpx;
- border-bottom: 2rpx solid #dddddd;
- .radio_label {
- width: 40rpx;
- float: left;
- height: 50rpx;
- padding-top: 30rpx;
- margin-right: 20rpx;
- .radio_icon {
- float: left;
- width: 40rpx;
- height: 40rpx;
- }
- }
- .contact_user {
- float: left;
- width: 640rpx;
- display: block;
- height: 50rpx;
- font-size: 24rpx;
- line-height: 50rpx;
- .contact_name {
- font-size: 26rpx;
- font-weight: bold;
- margin-right: 16rpx;
- }
- .contact_default {
- color: #F59A23;
- font-size: 20rpx;
- margin-left: 16rpx;
- border: 1rpx solid #F59A23;
- }
- .contact_shop {
- float: right;
- font-size: 26rpx;
- margin-right: 16rpx;
- }
- }
- .contact_addr {
- float: left;
- width: 640rpx;
- display: block;
- font-size: 24rpx;
- line-height: 30rpx;
- padding: 10rpx 5rpx;
- }
- }
- }
- .create_box {
- height: 140rpx;
- display: block;
- .create_addr {
- width: 700rpx;
- height: 80rpx;
- display: block;
- color: #FFFFFF;
- font-size: 30rpx;
- overflow: hidden;
- line-height: 80rpx;
- padding: 0rpx 0rpx;
- text-align: center;
- margin: 0rpx auto;
- margin-top: 20rpx;
- border-radius: 40rpx;
- background-color: #E03519;
- }
- }
- .regiment_popup_list {
- display: block;
- overflow: hidden;
- min-height: 600rpx;
- margin: 10rpx auto;
- background: #FFFFFF;
- padding-bottom: 50rpx;
- .regiment_popup_item {
- height: 100rpx;
- display: block;
- margin: 10rpx auto;
- border-bottom: 2rpx solid #DDDDDD;
- .username {
- float: left;
- padding-left: 20rpx;
- padding-top: 20rpx;
- .user_image {
- float: left;
- display: block;
- width: 80rpx;
- height: 80rpx;
- border-radius: 40%;
- }
- .username_text {
- height: 80rpx;
- line-height: 80rpx;
- }
- }
- .regiment_center {
- float: right;
- padding-right: 18rpx;
- padding-top: 25rpx;
- .regiment_center_text {
- font-size: 25rpx;
- }
- .regiment_center_time {
- font-size: 25rpx;
- .center_title {
- float: left;
- }
- }
- }
- .regiment_right {
- float: right;
- padding-top: 25rpx;
- .regiment_but {
- font-size: 25rpx;
- background-color: #E03519;
- color: #F9F9F9;
- }
- }
- }
- .coupon_item:last-child {
- border-bottom: none;
- }
- }
- }
- // 添加客服
- .center_popup {
- .add_follow {
- display: block;
- color: #FFFFFF;
- width: 700rpx;
- height: 800rpx;
- margin: 0 auto;
- font-size: 26rpx;
- border-radius: 40rpx;
- background: linear-gradient(to bottom, #ff0091 0%, #2c82ff 100%);
- .close_area {
- height: 80rpx;
- display: block;
- line-height: 80rpx;
- .close_btn {
- color: #FFFFFF;
- float: right;
- width: 80rpx;
- height: 80rpx;
- font-size: 26rpx;
- text-align: center;
- line-height: 80rpx;
- padding: 0rpx 0rpx;
- border: 0rpx solid transparent;
- background-color: transparent;
- }
- .close_btn::after {
- border: 0rpx solid transparent;
- }
- }
- .info_alter {
- display: block;
- height: 100rpx;
- font-size: 42rpx;
- font-weight: bold;
- text-align: center;
- line-height: 100rpx;
- }
- .qr_code_area {
- display: block;
- width: 300rpx;
- height: 300rpx;
- margin: 30rpx auto;
- .qr_code {
- float: left;
- width: 300rpx;
- height: 300rpx;
- }
- }
- .save_btn {
- color: #333333;
- display: block;
- width: 260rpx;
- height: 80rpx;
- font-size: 26rpx;
- text-align: center;
- line-height: 80rpx;
- padding: 0rpx 0rpx;
- margin: 40rpx auto;
- border-radius: 40rpx;
- background-color: #FFFFFF;
- border: 0rpx solid transparent;
- }
- .rule_info {
- width: 600rpx;
- display: block;
- font-size: 26rpx;
- margin: 20rpx auto;
- overflow: hidden;
- line-height: 40rpx;
- }
- }
- }
- .regiment_list {
- width: 700rpx;
- margin-left: 20rpx;
- background-color: red;
- border-radius: 10px;
- .regiment_list_title {
- padding-top: 20rpx;
- height: 60rpx;
- .title1 {
- margin-top: 20rpx;
- padding-left: 20rpx;
- color: #F9F9F9;
- }
- .title2 {
- padding-left: 350rpx;
- color: #F9F9F9;
- }
- }
- .regiment {
- width: 685rpx;
- height: 250rpx;
- background-color: #F9F9F9;
- margin-left: 10rpx;
- border-radius: 10px;
- .swiper {
- height: 250rpx;
- .swiper-item {
- .username {
- float: left;
- padding-left: 20rpx;
- padding-top: 20rpx;
- .user_image {
- float: left;
- display: block;
- width: 80rpx;
- height: 80rpx;
- border-radius: 40%;
- }
- .username_text {
- height: 80rpx;
- line-height: 80rpx;
- }
- }
- .regiment_center {
- float: right;
- padding-right: 18rpx;
- padding-top: 25rpx;
- .regiment_center_text {
- font-size: 25rpx;
- }
- .regiment_center_time {
- font-size: 25rpx;
- .center_title {
- float: left;
- }
- }
- }
- .regiment_right {
- float: right;
- padding-top: 25rpx;
- .regiment_but {
- font-size: 25rpx;
- background-color: #E03519;
- color: #F9F9F9;
- }
- }
- }
- }
- }
- }
- </style>
|