createOrderPink.vue 41 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661
  1. <template>
  2. <view>
  3. <!-- 地址 -->
  4. <!-- <uni-notice-bar class="notice-bar" background-color="#FFFFFF" color="#141414" showIcon="true" single="true" :text="notice"></uni-notice-bar>
  5. <view v-if="tabCurrentIndex == 0" class="address-section" @click="Toaddress">
  6. <view class="order-content" v-if="addressData.real_name">
  7. <text class="iconfont iconlocation"></text>
  8. <view class="cen">
  9. <view class="top">
  10. <text class="name">{{ addressData.real_name }}</text>
  11. <text class="mobile">{{ addressData.phone }}</text>
  12. </view>
  13. <text class="address">{{ addressData.province + addressData.city + addressData.district }} {{ addressData.detail }}</text>
  14. </view>
  15. <text class="iconfont iconenter"></text>
  16. </view>
  17. <view class="order-content" v-if="!addressData.real_name">
  18. <view class="addAddress">
  19. <text class="iconfont iconaddition"></text>
  20. <text>添加收货地址</text>
  21. </view>
  22. </view>
  23. <image class="a-bg" :src="addressImg"></image>
  24. </view>
  25. <navigator v-if="tabCurrentIndex == 1" url="/pages/address/shopList" class="address-section">
  26. <view class="order-content" v-if="shopAddress.name">
  27. <text class="iconfont iconlocation"></text>
  28. <view class="cen">
  29. <view class="top">
  30. <text class="name">{{ shopAddress.name }}</text>
  31. <text class="mobile">{{ shopAddress.mobile }}</text>
  32. </view>
  33. <text class="address">{{ shopAddress.address }} {{ shopAddress.area }}</text>
  34. </view>
  35. <text class="iconfont iconenter"></text>
  36. </view>
  37. <view class="order-content" v-if="!shopAddress.name">
  38. <text class="addAddress">
  39. <text class="iconfont iconaddition"></text>
  40. <text>添加收货地址</text>
  41. </text>
  42. </view>
  43. <image class="a-bg" :src="addressImg"></image>
  44. </navigator> -->
  45. <view class="Address_Box">
  46. <view class="add-title">站点自提</view>
  47. <view class="address-frame">
  48. <view class="Address-first">{{ pinkaddress.province + pinkaddress.city }}</view>
  49. <view class="Address-last">{{ pinkaddress.district + pinkaddress.detail }}</view>
  50. </view>
  51. <view class="tuanBox">
  52. <text class="tuan-text">团长</text>
  53. <text>{{ pinkaddress.real_name }}</text>
  54. </view>
  55. <view class="tuanBox">
  56. <text class="tuan-text">手机号</text>
  57. <text>{{ pinkaddress.phone }}</text>
  58. </view>
  59. </view>
  60. <!-- 商品列表 -->
  61. <view class="goods">
  62. <view class="goods-name flex">
  63. <view class="name">送达时间</view>
  64. <view class="time flex" v-if="showMask">
  65. <view>
  66. <view @tap="showPicker('linkage')" class="result">{{ resulttime }}</view>
  67. <w-picker
  68. mode="linkage"
  69. :value="defaultRegion1"
  70. :options="options"
  71. :level="2"
  72. default-type="id"
  73. :default-props="defaultProps1"
  74. @confirm="onConfirm($event, 'linkage')"
  75. @cancel="onCancel"
  76. ref="linkage"
  77. ></w-picker>
  78. </view>
  79. <text class="iconfont iconenter"></text>
  80. </view>
  81. <view class="red" v-if="pink_type == 1">{{mark}}</view>
  82. </view>
  83. <view class="goods-section">
  84. <view class="pink_name" v-if="pink_type == 1">{{pink_name}}</view>
  85. <view class="g-item flex_item" v-if="ShowType == 2">
  86. <scroll-view class="scroll-list" scroll-x>
  87. <view class="scoll-box" v-for="(ls, ind) in shopList" :key="ls.id">
  88. <view class="scoll-img"><image :src="ls.productInfo.image"></image></view>
  89. </view>
  90. </scroll-view>
  91. <view class="total">共{{ shopList.length }}件</view>
  92. </view>
  93. <view class="gift-item flex_item" v-if="ShowType == 1" v-for="(ls, ind) in shopList" :key="ind">
  94. <image :src="ls.productInfo.image"></image>
  95. <view class="right">
  96. <text class="title clamp">{{ ls.productInfo.store_name }}</text>
  97. <!-- <text class="spec">{{ ls.productInfo.attrInfo ? ls.productInfo.attrInfo.suk : '默认' }}</text> -->
  98. <view class="price-box">
  99. <text class="price">¥{{ ls.productInfo.attrInfo ? ls.productInfo.attrInfo.price : ls.productInfo.price }}</text>
  100. </view>
  101. <view class="price-box">
  102. <!-- <text class="number">{{ 'x ' + ls.cart_num }}</text> -->
  103. <view class="number">
  104. <uni-number-box
  105. class="step"
  106. :isMin="true"
  107. :value="goodsNumber"
  108. :min="1"
  109. :max="goodsNumberMax"
  110. @eventChange="numberChange">
  111. </uni-number-box>
  112. </view>
  113. </view>
  114. </view>
  115. </view>
  116. </view>
  117. </view>
  118. <!-- 金额明细 -->
  119. <!-- <view class="yt-list">
  120. <view class="yt-list-cell b-b">
  121. <text class="cell-tit clamp">支付方式</text>
  122. <text class="cell-tip">微信</text>
  123. </view>
  124. </view> -->
  125. <view class="goods" v-if="activityPro">
  126. <view class="goods-section">
  127. <view class="gift-item flex_item padding-t-0">
  128. <image :src="activityPro.image"></image>
  129. <view class="right">
  130. <text class="title clamp">{{ activityPro.store_name }}</text>
  131. <!-- <text class="spec">{{ activityPro.attrInfo ? activityPro.attrInfo.suk : '默认' }}</text> -->
  132. <view class="price-box"><text class="price">免费</text></view>
  133. </view>
  134. <view class="iconLeftTip">活动赠品</view>
  135. </view>
  136. </view>
  137. </view>
  138. <!-- <view class="green_card">
  139. <view class="box">
  140. <view class="img"><image src="/static/img/img36.png"></image></view>
  141. <view class="list flex">
  142. <view class="tpl">
  143. <view class="tip" v-if="grade < 100">
  144. 开通美卡,本单最高可减
  145. <text>{{ moneyAll.vipPrice }}元</text>
  146. </view>
  147. <view class="tip" v-if="grade > 99">
  148. 您已开通美卡,本单节省
  149. <text>{{ moneyAll.vipPrice }}元</text>
  150. </view>
  151. <view class="top" v-if="grade < 100">一天2毛4,一年约省806元</view>
  152. <view class="top" v-if="grade > 99">美卡有效期至{{ userInfo.level_valid_time }}</view>
  153. </view>
  154. <view class="tpl flex" v-if="grade < 100">
  155. <view class="money">¥88.00/年</view>
  156. <radio @click="checkbox" color="#06B163" :checked="checked" />
  157. </view>
  158. <view class="member" v-if="grade > 99" @click="ToMemer">
  159. 我的美卡
  160. <text class="iconfont iconenter"></text>
  161. </view>
  162. </view>
  163. </view>
  164. </view> -->
  165. <!-- 优惠明细 -->
  166. <view class="yt-list" v-if="showMask">
  167. <!-- 优惠券 -->
  168. <view class="yt-list-cell b-b" @click="toggleMask('show')">
  169. <!-- maskState: 0, //优惠券面板显示状态
  170. goodsState:0,//商品券面板显示状态
  171. deliveryState:0,//配送权面板显示状态 -->
  172. <text class="cell-tit clamp">优惠券</text>
  173. <text class="cell-tip active" v-if="userInfo.discount_coupon_count > 0 && !couponChecked.coupon_price">
  174. {{ userInfo.discount_coupon_count }}张可用
  175. <text class="iconfont iconenter"></text>
  176. </text>
  177. <text class="cell-tip red" v-if="couponChecked.coupon_price">-¥{{ couponChecked.coupon_price }}</text>
  178. <text class="cell-tip disabled" v-if="userInfo.discount_coupon_count == 0 && !couponChecked.coupon_price">没有优惠券</text>
  179. <text class="cell-more wanjia wanjia-gengduo-d"></text>
  180. </view>
  181. <!-- 免配送券 -->
  182. <view class="yt-list-cell b-b flex" v-if="userInfo.freight_coupon_count > 0 && moneyAll.storePostage > 0">
  183. <view class="cell-tit clamp">免配送券({{ userInfo.freight_coupon_count }}张可用)</view>
  184. <view class="cell-tip active"><radio @click="Getcheckbox" color="#06B163" :checked="checkedPei" /></view>
  185. </view>
  186. <!-- 商品券 -->
  187. <view class="yt-list-cell b-b" @click="goods('show')">
  188. <text class="cell-tit clamp">商品券</text>
  189. <text class="cell-tip active" v-if="userInfo.product_coupon_count > 0 && !GoodsChecked.coupon_price">
  190. {{ userInfo.product_coupon_count }}张可用
  191. <text class="iconfont iconenter"></text>
  192. </text>
  193. <text class="cell-tip red" v-if="GoodsChecked.coupon_price">{{ GoodsChecked.coupon_title }}</text>
  194. <text class="cell-tip disabled" v-if="userInfo.product_coupon_count > 0 == 0 && !GoodsChecked.coupon_price">没有优惠券</text>
  195. <text class="cell-more wanjia wanjia-gengduo-d"></text>
  196. </view>
  197. <view class="yt-list-cell b-b">
  198. <text class="cell-tit clamp">备注</text>
  199. <input class="desc" type="text" v-model="desc" placeholder="请填写备注信息" placeholder-class="placeholder" />
  200. </view>
  201. </view>
  202. <view class="info">
  203. <view class="flex">
  204. <view>商品金额</view>
  205. <view>¥{{ priceGroupDate.total_price }}</view>
  206. </view>
  207. <view class="flex">
  208. <view>配送费用</view>
  209. <view>¥{{ priceGroupDate.pay_postage }}</view>
  210. </view>
  211. <view class="flex">
  212. <text class="cell-tit clamp">备注</text>
  213. <input class="desc" style="text-align: right;" type="text" v-model="desc" placeholder="请填写你的地址(选填)" placeholder-class="placeholder" />
  214. </view>
  215. <view class="flex" v-if="showMask"><view style="color: #ff383e;font-size: 24rpx;">(第一笔订单满19元时,第二单选择相同时段配送免配送费)</view></view>
  216. <view class="flex" v-if="!DeliveryChecked.coupon_price"></view>
  217. <view class="flex" v-if="DeliveryChecked.coupon_price">
  218. <view>配送券</view>
  219. <view class="red">-¥{{ DeliveryChecked.coupon_price }}</view>
  220. </view>
  221. </view>
  222. <!-- 底部 -->
  223. <view class="footer">
  224. <view class="price-content">
  225. <text>实付款:</text>
  226. <text class="price-tip">¥</text>
  227. <text class="price">{{ payPrice }}</text>
  228. </view>
  229. <text class="submit" :class="{ submitNo: !payType }" @click="payType ? submit() : ''">提交订单</text>
  230. </view>
  231. <!-- 优惠券面板 -->
  232. <view class="mask" :class="maskState === 0 ? 'none' : maskState === 1 ? 'show' : ''" @click="toggleMask">
  233. <view class="mask-content">
  234. <!-- 优惠券页面,仿mt -->
  235. <view class="name">领优惠券</view>
  236. <view class="coupon-item flex" @click="checkedCp(item)" v-for="(item, index) in couponList" :key="index">
  237. <view class="left">
  238. <view class="left-price">
  239. <text>{{ item.coupon_price }}</text>
  240. </view>
  241. <view class="left-man">满{{ item.use_min_price }}元使用</view>
  242. </view>
  243. <view class="right flex">
  244. <view class="right-info">
  245. <view class="info-name">{{ item.coupon_title }}</view>
  246. <view class="info-tip">限指定商品使用</view>
  247. <view class="info-tip">有效期至{{ item.end_time }}</view>
  248. </view>
  249. <!-- <view class="right-submit">立即领取</view> -->
  250. </view>
  251. </view>
  252. </view>
  253. </view>
  254. <!-- 领取商品券 -->
  255. <view class="mask" :class="goodsState === 0 ? 'none' : goodsState === 1 ? 'show' : ''" @click="goods">
  256. <view class="mask-content">
  257. <!-- 优惠券页面,仿mt -->
  258. <view class="name">领商品券</view>
  259. <view v-for="(item, index) in goodsList" :key="index" @click="checkedGoods(item)" class="goodsState flex">
  260. <view class="img"><image src="/static/img/img37.png" mode="scaleToFill"></image></view>
  261. <view class="delivery-box flex">
  262. <view class="list-money">
  263. <view class="tit">
  264. <text>{{ item.coupon_price }}</text>
  265. </view>
  266. <view class="price">美天选菜商品券</view>
  267. </view>
  268. <view class="row_list_right">
  269. <view class="title">{{ item.coupon_title }}</view>
  270. <view class="text">使用日期:{{ item.add_time }} 至{{ item.end_time }}</view>
  271. </view>
  272. <view class="use"><text>使用</text></view>
  273. </view>
  274. <view class="img"><image src="/static/img/img38.png" mode="scaleToFill"></image></view>
  275. </view>
  276. </view>
  277. </view>
  278. <view class="check_box flex" v-if="pink_type == 1">
  279. <view class="ziti-text" @click="Ziti">用户自提协议</view>
  280. <view><radio style="transform: scale(0.75)" @click="Getcheckbox11" color="#3DCF35" :checked="checked11" />同意</view>
  281. </view>
  282. <!-- 是否需要食物商品 -->
  283. <!-- <uni-popup ref="popup" type="center" :maskClick="false">
  284. <view class="pop-box">
  285. <view class="pop-tit">是否需要实物商品</view>
  286. <view class="pop-buttom">
  287. <view class="pop-sub" style="color: #5dbc7c;" @click="Needyes">是</view>
  288. <view class="pop-sub" style="color: #FF0000;" @click="Needno">否</view>
  289. </view>
  290. </view>
  291. </uni-popup> -->
  292. <uni-popup ref="popup" type="center">
  293. <view class="Mask-box">
  294. <view class="title">申请获取您的手机号</view>
  295. <view class="text">为了方便您的取货和我们的送货,并获取更多优惠活动,需要您的手机授权</view>
  296. <button class="weixin" open-type="getPhoneNumber" @getphonenumber="PhoneNumber">获取手机号授权</button>
  297. </view>
  298. </uni-popup>
  299. </view>
  300. </template>
  301. <script>
  302. import { mapState, mapMutations } from 'vuex';
  303. import { confirm, ChangeNum } from '@/api/order.js';
  304. import { couponsOrder } from '@/api/coupon.js';
  305. import { computedOrderkey } from '@/api/money.js';
  306. import { cartAdd } from '@/api/product.js';
  307. import uniPopup from '@/components/uni-popup/uni-popup.vue';
  308. import wPicker from '@/components/w-picker/w-picker.vue';
  309. import { bangding } from '@/api/login.js';
  310. import uniNumberBox from '@/components/uni-number-box.vue';
  311. export default {
  312. components: {
  313. wPicker,
  314. uniPopup,
  315. uniNumberBox
  316. },
  317. data() {
  318. return {
  319. pink_type:"",//区分拼团订单和普通订单
  320. pink_name:"",//区分aa团和达人团
  321. checked11:false,
  322. mark:"",
  323. ShowType: 1, //商品显示形式
  324. checkedPei: false, //是否选择配送券
  325. checked: false, //是否选择开通美卡
  326. isBuyVip: 0, //0为未使用配送券,1为使用配送券
  327. Deliveryid: 0, //选择的配送券id
  328. userInfo: '', //用户个人信息
  329. estimated_time: '', //选择配送时间
  330. resulttime: '请选择送达时间', //选择配送时间传值
  331. defaultProps1: {
  332. label: 'name',
  333. value: 'id',
  334. children: 'child'
  335. },
  336. defaultRegion1: ['1', '9'],
  337. options: [
  338. {
  339. id: '1',
  340. name: '明日到家',
  341. child: [
  342. {
  343. id: '9',
  344. name: '请选择送达时间',
  345. child: []
  346. },
  347. {
  348. id: '11',
  349. name: '预计16:30前',
  350. child: []
  351. },
  352. {
  353. id: '10',
  354. name: '预计10:30前',
  355. child: []
  356. }
  357. ]
  358. }
  359. ],
  360. addressImg: '/static/img/img35.png',
  361. // 当前选中的支付方式
  362. tabCurrentIndex: 0,
  363. notice: '商品到货后,系统将会通知您来取货~',
  364. navList: [
  365. {
  366. state: 0,
  367. text: '快递配送'
  368. },
  369. {
  370. state: 1,
  371. text: '到店自提'
  372. }
  373. ],
  374. showMask: true, //是否显示优惠券面板
  375. maskState: 0, //优惠券面板显示状态
  376. goodsState: 0, //商品券面板显示状态
  377. deliveryState: 0, //配送权面板显示状态
  378. desc: '', //备注
  379. couponList: [], // 优惠券列表
  380. deliveryList: [], //配送券列表
  381. goodsList: [], //商品券列表
  382. couponChecked: '', //选中的优惠券
  383. DeliveryChecked: '', //选中的配送券
  384. GoodsChecked: '', //选中的商品券
  385. // 收货地址
  386. addressData: {},
  387. // 店铺地址
  388. shopAddress: {
  389. name: '',
  390. mobile: '',
  391. addressName: '',
  392. address: '',
  393. area: '',
  394. default: false
  395. },
  396. // 商品列表
  397. shopList: [],
  398. // 购物车id
  399. cartId: '',
  400. grade: '', //用户等级
  401. //购物金额详情
  402. moneyAll: {
  403. storeFreePostage: 0, //邮费优惠
  404. storePostage: 0, //邮费
  405. totalPrice: 0, //总支付金额
  406. vipPrice: 0 //vip优惠价
  407. },
  408. payPrice: 0, //总支付金额
  409. orderKey: '', //订单id
  410. checkedPoints: false, //判断是否积分抵扣
  411. integralShow: false, //是否显示积分抵扣金额
  412. payType: 1, //1微信 2支付宝
  413. // payType: true, //是否可支付
  414. pinkid: '', //保存拼团商品id
  415. form: '', //0优惠券,3配送券,2商品券
  416. priceGroupDate: '', //重新计算金额
  417. activityPro: '' ,//活动赠送商品
  418. goodsType: '', // 是否为拼团
  419. neednum: '', // 是否需要食物
  420. pinkUser: '' ,//是否为团长
  421. pinkaddress: {}, // 团长地址
  422. cache_key: '',
  423. iv: '',
  424. code: '',
  425. encryptedData: '',
  426. goodsNumberMax: '', // 购买最大数量
  427. goodsNumber: 1, // 数量
  428. CombinaId: '' // 拼团商品id
  429. };
  430. },
  431. onLoad(option) {
  432. console.log(option,968)
  433. // 判断是否为拼团商品
  434. this.goodsNumberMax = option.num
  435. if (option.type == 'pink') {
  436. this.showMask = false;
  437. this.pinkid = option.pinkid;
  438. this.cartAdd(option);
  439. } else {
  440. // 判断是否拼团商品过来的
  441. if (+option.goodsType == 2) {
  442. this.showMask = false;
  443. }
  444. // 保存当前商品在购物车中的id
  445. this.cartId = option.id;
  446. this.pinkUser = option.pinkUser
  447. this.loadData();
  448. }
  449. },
  450. watch: {
  451. checkedPoints(newValue, oldValue) {
  452. this.integralShow = false;
  453. this.payMoneyNub();
  454. },
  455. estimated_time(newValue, oldValue) {
  456. this.payMoneyNub();
  457. }
  458. },
  459. computed: {
  460. Postage() {
  461. let money = +this.moneyAll.storePostage;
  462. if (money == 0) {
  463. return '免运费';
  464. } else {
  465. return '¥' + money;
  466. }
  467. },
  468. payAllMoney() {
  469. return +this.moneyAll.totalPrice + +this.moneyAll.vipPrice;
  470. }
  471. },
  472. methods: {
  473. ...mapMutations(['upAddressPageShow']),
  474. // 改变数量
  475. numberChange(e) {
  476. console.log(e)
  477. let obj = this;
  478. ChangeNum({
  479. cartId: obj.cartId,
  480. combinationId: obj.CombinaId,
  481. cartNum: e.number
  482. }).then(({data}) => {
  483. obj.loadData()
  484. })
  485. },
  486. // 选择是
  487. Needyes(){
  488. this.neednum = 0;
  489. this.payMoneyNub()
  490. this.$refs.popup.close()
  491. console.log(this.neednum,99)
  492. },
  493. //自提服务协议
  494. Getcheckbox11() {
  495. let obj = this;
  496. obj.checked11 = !obj.checked11;
  497. },
  498. // 跳转到自提协议
  499. Ziti() {
  500. uni.navigateTo({
  501. url: '/pages/rule/Pickrule'
  502. });
  503. },
  504. // 选择否
  505. Needno(){
  506. this.neednum = 1;
  507. this.payMoneyNub()
  508. this.$refs.popup.close()
  509. console.log(this.neednum,99)
  510. },
  511. showPicker(type) {
  512. this.$refs[type].show();
  513. },
  514. onConfirm(res, type) {
  515. this.resulttime = res.result;
  516. if (res.value[1] == 10) {
  517. this.estimated_time = '10:30';
  518. }
  519. if (res.value[1] == 11) {
  520. this.estimated_time = '16:30';
  521. }
  522. if (res.value[1] == 9) {
  523. this.estimated_time = '';
  524. }
  525. },
  526. onCancel() {},
  527. navTo(url) {
  528. uni.navigateTo({
  529. url
  530. });
  531. },
  532. // 添加商品到购物车
  533. cartAdd(opt) {
  534. let obj = this;
  535. cartAdd({
  536. cartNum: obj.goodsNumber, //商品数量
  537. new: 1, //商品是否新增加到购物车1为不加入0为加入
  538. mer_id: +opt.merid, //商店id
  539. combinationId: +opt.gid, //拼团商品id
  540. productId: +opt.pid //普通商品id
  541. })
  542. .then(function(e) {
  543. let da = e.data;
  544. // 獲取购物车号
  545. obj.cartId = da.cartId;
  546. // 加载数据
  547. obj.loadData();
  548. })
  549. .catch(e => {
  550. console.log(e);
  551. });
  552. },
  553. //是否选择配送券
  554. Getcheckbox() {
  555. let obj = this;
  556. obj.checkedPei = !obj.checkedPei;
  557. if (obj.checkedPei == false) {
  558. obj.Deliveryid = 0;
  559. obj.payMoneyNub();
  560. } else {
  561. obj.Deliveryid = obj.deliveryList[0].id;
  562. obj.payMoneyNub();
  563. }
  564. },
  565. Toaddress() {
  566. let addressPageShow = uni.getStorageSync('addaddressPageShowressData');
  567. if (!addressPageShow) {
  568. this.upAddressPageShow();
  569. }
  570. uni.showModal({
  571. title: '提示',
  572. content: '修改地址需要重新下单,是否确认修改?',
  573. success: function(res) {
  574. if (res.confirm) {
  575. uni.navigateTo({
  576. url: '/pages/index/address'
  577. });
  578. } else if (res.cancel) {
  579. }
  580. }
  581. });
  582. },
  583. //是否开通美卡
  584. checkbox() {
  585. let obj = this;
  586. obj.checked = !obj.checked;
  587. console.log(obj.checked, 'checked');
  588. if (obj.checked == false) {
  589. obj.isBuyVip = 0;
  590. obj.payMoneyNub();
  591. } else {
  592. obj.isBuyVip = 1;
  593. obj.payMoneyNub();
  594. }
  595. },
  596. // 计算支付金额
  597. payMoneyNub() {
  598. console.log(this.neednum)
  599. computedOrderkey({
  600. isBuyVip: this.isBuyVip, //是否使用配送券
  601. orderkey: this.orderKey,
  602. useIntegral: this.checkedPoints ? 1 : 0, //是否积分抵扣
  603. couponId: this.couponChecked.id, //优惠券编号
  604. goCouponId: this.Deliveryid, //配送券编号
  605. productCouponId: this.GoodsChecked.id, //商品券编号
  606. addressId: this.addressData.id, //地址编号
  607. estimated_time: this.estimated_time,
  608. is_pink_free: this.neednum,
  609. isPink: 1,
  610. pinkId: this.pinkid // 拼团id
  611. })
  612. .then(({ data }) => {
  613. this.payType = true;
  614. this.integralShow = true;
  615. // 获取支付金额
  616. this.payPrice = +data.result.pay_price;
  617. this.priceGroupDate = data.result;
  618. // 保存活动赠送商品
  619. this.activityPro = data.result.activityPro;
  620. this.pinkaddress = data.result.pink_address;
  621. })
  622. .catch(e => {
  623. console.log(e);
  624. this.integralShow = false;
  625. this.payType = false;
  626. });
  627. },
  628. // 是否使用积分
  629. checkedIntegral() {
  630. this.checkedPoints = !this.checkedPoints;
  631. },
  632. // 选中优惠券
  633. checkedCp(item) {
  634. this.couponChecked = item;
  635. this.payMoneyNub();
  636. },
  637. // 选中配送券
  638. // checkedDelivery(item) {
  639. // this.DeliveryChecked = item;
  640. // this.payMoneyNub();
  641. // },
  642. // 选中商品券
  643. checkedGoods(item) {
  644. this.GoodsChecked = item;
  645. this.payMoneyNub();
  646. },
  647. //顶部tab点击
  648. tabClick(index) {
  649. this.tabCurrentIndex = index;
  650. },
  651. // maskState: 0, //优惠券面板显示状态
  652. // goodsState:0,//商品券面板显示状态
  653. // deliveryState:0,//配送券面板显示状态
  654. //显示优惠券面板
  655. toggleMask(type) {
  656. if (this.userInfo.discount_coupon_count == 0) {
  657. return;
  658. } else {
  659. let timer = type === 'show' ? 10 : 300;
  660. let state = type === 'show' ? 1 : 0;
  661. this.maskState = 2;
  662. setTimeout(() => {
  663. this.maskState = state;
  664. }, timer);
  665. }
  666. },
  667. //显示商品券面板
  668. goods(type) {
  669. if (this.userInfo.product_coupon_count == 0) {
  670. return;
  671. }
  672. let timer = type === 'show' ? 10 : 300;
  673. let state = type === 'show' ? 1 : 0;
  674. this.goodsState = 2;
  675. setTimeout(() => {
  676. this.goodsState = state;
  677. }, timer);
  678. },
  679. //显示配送券面板
  680. delivery(type) {
  681. if (this.userInfo.freight_coupon_count == 0) {
  682. return;
  683. }
  684. let timer = type === 'show' ? 10 : 300;
  685. let state = type === 'show' ? 1 : 0;
  686. this.deliveryState = 2;
  687. setTimeout(() => {
  688. this.deliveryState = state;
  689. }, timer);
  690. },
  691. // 加载优惠券列表
  692. // couponsOrder() {
  693. // let obj = this;
  694. // let money = obj.moneyAll.totalPrice;
  695. // couponsOrder(
  696. // {
  697. // form: 0
  698. // },
  699. // money
  700. // ).then(e => {
  701. // this.couponList = e.data;
  702. // });
  703. // couponsOrder(
  704. // {
  705. // form: 2
  706. // },
  707. // money
  708. // ).then(e => {
  709. // this.goodsList = e.data;
  710. // });
  711. // couponsOrder(
  712. // {
  713. // form: 3
  714. // },
  715. // money
  716. // ).then(e => {
  717. // this.deliveryList = e.data;
  718. // });
  719. // },
  720. //获取订单信息
  721. loadData() {
  722. let obj = this;
  723. confirm({ cartId: obj.cartId + '' })
  724. .then(({ data }) => {
  725. obj.CombinaId = data.combination_id; // 拼团商品id
  726. obj.mark = data.mark;
  727. obj.addressData = data.addressInfo || {};
  728. obj.shopList = data.cartInfo; //商品列表
  729. if (obj.shopList.length < 2) {
  730. obj.ShowType = 1;
  731. } else {
  732. obj.ShowType = 2;
  733. }
  734. obj.moneyAll = data.priceGroup; //金额数据
  735. obj.orderKey = data.orderKey; //订单key
  736. obj.userInfo = data.userInfo;
  737. if(data.combination_id){
  738. if(data.combination_id > 0){
  739. obj. pink_type= 1;
  740. obj. pink_name= data.pink_type ;
  741. }else{
  742. obj. pink_type= 0;
  743. }
  744. }
  745. console.log(data.pink_type,55)
  746. if (data.userInfo.level_info == null) {
  747. obj.grade = 0;
  748. } else {
  749. obj.grade = data.userInfo.level_info.grade;
  750. }
  751. // 计算金额
  752. this.payMoneyNub();
  753. // 加载各种券
  754. obj.couponsOrder();
  755. // if( this.pinkid == '' && this.userInfo.day_give == 1 && this.pinkUser == 1) {
  756. // this.$refs.popup.open()
  757. // }
  758. })
  759. .catch(e => {
  760. console.log(e.message);
  761. if (e.message == '未在营业时间') {
  762. setTimeout(function() {
  763. uni.switchTab({
  764. url: '/pages/index/index'
  765. });
  766. }, 1000);
  767. }
  768. if (e.message == '请先授权绑定手机号码') {
  769. obj.$refs.popup.open()
  770. // setTimeout(function() {
  771. // uni.navigateBack()
  772. // }, 1000);
  773. }
  774. });
  775. },
  776. // 绑定手机号
  777. PhoneNumber(e) {
  778. let obj = this;
  779. obj.$refs.popup.close()
  780. console.log(e);
  781. obj.cache_key = uni.getStorageSync('cache_key') || '';
  782. // obj.iv = uni.getStorageSync('iv') || '';
  783. // obj.encryptedData = uni.getStorageSync('encryptedData') || '';
  784. obj.code = uni.getStorageSync('code') || '';
  785. (obj.iv = e.detail.iv), (obj.encryptedData = e.detail.encryptedData);
  786. bangding({
  787. flag: 1,
  788. cache_key: obj.cache_key,
  789. code: obj.code,
  790. iv: obj.iv,
  791. encryptedData: obj.encryptedData
  792. }).then(function(e) {
  793. console.log('bangding1')
  794. bangding({
  795. flag: 1,
  796. cache_key: obj.cache_key,
  797. code: obj.code,
  798. iv: obj.iv,
  799. encryptedData: obj.encryptedData,
  800. step: 1
  801. })
  802. .then(function(e) {
  803. // 获取用户基础信息
  804. // obj.GetUser();
  805. // obj.$api.msg(e.msg);
  806. // obj.$nextTick(function() {
  807. // obj.ToIndex();
  808. // });
  809. setTimeout(function() {
  810. uni.navigateBack()
  811. }, 1000);
  812. })
  813. .catch(e => {
  814. console.log(e);
  815. });
  816. // } else {
  817. // console.log('bangding2')
  818. // obj.$api.msg(e.msg);
  819. // // 获取用户基础信息
  820. // // obj.GetUser();
  821. // // obj.$api.msg(e.msg);
  822. // // obj.$nextTick(function() {
  823. // // obj.ToIndex();
  824. // // });
  825. // }
  826. });
  827. },
  828. // 购买数量变化
  829. // numberChange(data) {
  830. // this.number = data.number;
  831. // },
  832. // 修改支付方式
  833. changePayType(type) {
  834. this.payType = type;
  835. },
  836. // 提交订单
  837. submit() {
  838. if(this.pink_type == 1){
  839. if(this.checked11 === false){
  840. this.$api.msg('请同意用户自提协议');
  841. return false;
  842. }
  843. }
  844. if (this.checkedPoints && this.shopList.length > 1) {
  845. this.$api.msg('积分商品只可单件购买');
  846. return false;
  847. }
  848. // if (!this.addressData.real_name) {
  849. // this.$api.msg('请选择收货地址');
  850. // return false;
  851. // }
  852. if (this.estimated_time == '' && this.showMask) {
  853. this.$api.msg('请选择送达时间');
  854. return false;
  855. }
  856. let url = '/pages/money/pay?key=' + this.orderKey + '&estimated_time=' + this.estimated_time + '&free=' + this.neednum + '&pinkUser=' + this.pinkUser + '&isPink=1';
  857. if (this.pinkid) {
  858. url += '&pinkid=' + this.pinkid;
  859. }
  860. // 判断是否为拼团商品
  861. if (!this.showMask) {
  862. url += '&pink=1';
  863. }
  864. uni.navigateTo({
  865. url
  866. });
  867. },
  868. ToMemer() {
  869. if (this.grade > 99) {
  870. uni.navigateTo({
  871. url: '/pages/user/renew'
  872. });
  873. }
  874. if (this.grade < 100) {
  875. uni.navigateTo({
  876. url: '/pages/user/card'
  877. });
  878. }
  879. }
  880. }
  881. };
  882. </script>
  883. <style lang="scss">
  884. page {
  885. background: $page-color-base;
  886. padding-bottom: 100rpx;
  887. }
  888. .notice-bar {
  889. position: relative;
  890. top: 10rpx;
  891. }
  892. .navbar {
  893. display: flex;
  894. height: 80rpx;
  895. padding: 0 5px;
  896. background: #fff;
  897. box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
  898. position: relative;
  899. z-index: 10;
  900. .nav-item {
  901. flex: 1;
  902. display: flex;
  903. justify-content: center;
  904. align-items: center;
  905. height: 100%;
  906. font-size: $font-lg + 4rpx;
  907. color: $font-color-dark;
  908. position: relative;
  909. &.current {
  910. color: $base-color;
  911. &:after {
  912. content: '';
  913. position: absolute;
  914. left: 50%;
  915. bottom: 0;
  916. transform: translateX(-50%);
  917. width: 140rpx;
  918. height: 0;
  919. border-bottom: 2px solid $base-color;
  920. }
  921. }
  922. }
  923. }
  924. .address-section {
  925. padding: 30rpx 0;
  926. background: #fff;
  927. position: relative;
  928. border-top: 1px solid $border-color-light;
  929. .order-content {
  930. min-height: 100rpx;
  931. display: flex;
  932. align-items: center;
  933. .addAddress {
  934. text-align: center;
  935. width: 100%;
  936. display: flex;
  937. justify-content: center;
  938. align-items: center;
  939. .iconaddition {
  940. font-size: 55rpx;
  941. line-height: 1;
  942. border-radius: 100rpx;
  943. margin-right: 20rpx;
  944. }
  945. }
  946. }
  947. .iconlocation {
  948. flex-shrink: 0;
  949. display: flex;
  950. align-items: center;
  951. justify-content: center;
  952. width: 90rpx;
  953. color: #888;
  954. font-size: 44rpx;
  955. }
  956. .cen {
  957. display: flex;
  958. flex-direction: column;
  959. flex: 1;
  960. font-size: 28rpx;
  961. color: $font-color-dark;
  962. }
  963. .name {
  964. font-size: 34rpx;
  965. margin-right: 24rpx;
  966. }
  967. .address {
  968. margin-top: 16rpx;
  969. margin-right: 20rpx;
  970. color: $font-color-light;
  971. }
  972. .icon-you {
  973. font-size: 32rpx;
  974. color: $font-color-light;
  975. margin-right: 30rpx;
  976. }
  977. .a-bg {
  978. position: absolute;
  979. left: 0;
  980. bottom: 0;
  981. display: block;
  982. width: 100%;
  983. height: 5rpx;
  984. }
  985. }
  986. .pink_name{
  987. position: absolute;
  988. top: 20rpx;
  989. left: 25rpx;
  990. z-index: 99;
  991. background-color: #FFF270;
  992. color: #934721;
  993. font-size: 22rpx;
  994. padding: 0rpx 8rpx;
  995. }
  996. .Address_Box { background: #FFFFFF; margin-top: 20rpx; border-radius: 20rpx;
  997. margin: 20rpx 22rpx 0; .add-title { height: 80rpx; line-height: 80rpx; font-size: 36rpx; font-weight: bold; color: rgba(0,0,0,1); text-align: center; background:rgba(218,250,209,.8);
  998. border-radius: 20rpx 20rpx 0 0; } .address-frame { padding: 30rpx 0 30rpx; margin-left: 20rpx; .Address-first { font-size: 32rpx; font-weight: bold; color: rgba(0,0,0,1); } .Address-last { font-size: $font-sm; font-weight: bold; color: rgba(155,155,155,1); } } .tuanBox { font-size: 26rpx; font-weight: bold; color: rgba(0,0,0,1); padding: 20rpx 0; margin-left: 20rpx;
  999. border-top: 1px solid #ECECEC; .tuan-text { display: inline-block; width: 90rpx; } } }
  1000. .goods {
  1001. margin: 0 22rpx;
  1002. padding: 15rpx 25rpx;
  1003. padding-bottom: 25rpx;
  1004. background: #ffffff;
  1005. margin-top: 25rpx;
  1006. .iconLeftTip {
  1007. position: absolute;
  1008. top: 20rpx;
  1009. left: 0rpx;
  1010. padding: 5rpx 10rpx;
  1011. background-color: $color-red;
  1012. color: #ffffff;
  1013. font-size: $font-sm - 4rpx;
  1014. }
  1015. .goods-name {
  1016. color: #141414;
  1017. font-size: 24rpx;
  1018. padding: 30rpx 0rpx;
  1019. border-bottom: 1px solid #ECECEC;
  1020. .name {
  1021. font-size: 35rpx;
  1022. }
  1023. .red {
  1024. color: #ff383e;
  1025. }
  1026. .time {
  1027. text {
  1028. padding-top: 7rpx;
  1029. }
  1030. }
  1031. }
  1032. .goods-section {
  1033. position: relative;
  1034. .g-header {
  1035. display: flex;
  1036. align-items: center;
  1037. height: 84rpx;
  1038. padding: 0 30rpx;
  1039. position: relative;
  1040. }
  1041. .logo {
  1042. display: block;
  1043. width: 50rpx;
  1044. height: 50rpx;
  1045. border-radius: 100px;
  1046. }
  1047. .name {
  1048. font-size: 30rpx;
  1049. color: $font-color-base;
  1050. margin-left: 24rpx;
  1051. }
  1052. .gift-item {
  1053. display: flex;
  1054. margin: 20rpx 30rpx;
  1055. padding-top: 20rpx;
  1056. position: relative;
  1057. image {
  1058. flex-shrink: 0;
  1059. display: block;
  1060. width: 140rpx;
  1061. height: 140rpx;
  1062. border-radius: 4rpx;
  1063. }
  1064. .right {
  1065. flex: 1;
  1066. padding-left: 24rpx;
  1067. overflow: hidden;
  1068. align-self: stretch;
  1069. }
  1070. .title {
  1071. font-size: 30rpx;
  1072. color: $font-color-dark;
  1073. }
  1074. .spec {
  1075. font-size: 26rpx;
  1076. color: $font-color-light;
  1077. }
  1078. .price-box {
  1079. display: flex;
  1080. align-items: center;
  1081. font-size: 32rpx;
  1082. color: $font-color-dark;
  1083. padding-top: 10rpx;
  1084. .price {
  1085. margin-bottom: 4rpx;
  1086. }
  1087. .number {
  1088. font-size: 26rpx;
  1089. color: $font-color-base;
  1090. margin-left: 20rpx;
  1091. }
  1092. }
  1093. .step-box {
  1094. position: relative;
  1095. }
  1096. }
  1097. .g-item {
  1098. width: 100%;
  1099. font-size: 24rpx;
  1100. height: 170rpx;
  1101. .scroll-list {
  1102. width: 80%;
  1103. overflow: hidden;
  1104. white-space: nowrap;
  1105. .scoll-box {
  1106. margin-right: 25rpx;
  1107. text-align: center;
  1108. display: inline-block;
  1109. .scoll-img {
  1110. width: 150rpx;
  1111. height: 150rpx;
  1112. border-radius: 100%;
  1113. image {
  1114. width: 150rpx;
  1115. height: 100%;
  1116. border-radius: 100%;
  1117. }
  1118. }
  1119. }
  1120. }
  1121. .total {
  1122. width: 20%;
  1123. text-align: center;
  1124. color: #515151;
  1125. font-size: 26rpx !important;
  1126. }
  1127. }
  1128. }
  1129. }
  1130. .green_card {
  1131. background: #ffffff;
  1132. padding: 30rpx 27rpx;
  1133. width: 100%;
  1134. margin-top: 15rpx;
  1135. font-size: 26rpx;
  1136. .box {
  1137. background: #f5f5f5;
  1138. padding: 25rpx 25rpx;
  1139. .img {
  1140. width: 100rpx;
  1141. height: 40rpx;
  1142. margin-bottom: 15rpx;
  1143. image {
  1144. width: 100%;
  1145. height: 100%;
  1146. }
  1147. }
  1148. .list {
  1149. .tpl {
  1150. .tip {
  1151. color: #425272;
  1152. text {
  1153. color: #ff383e;
  1154. }
  1155. }
  1156. .top {
  1157. color: #999999;
  1158. padding-top: 15rpx;
  1159. }
  1160. .money {
  1161. padding-right: 10rpx;
  1162. }
  1163. }
  1164. .member {
  1165. color: #425272;
  1166. }
  1167. }
  1168. }
  1169. }
  1170. .yt-list {
  1171. margin-top: 16rpx;
  1172. background: #fff;
  1173. }
  1174. .yt-list-cell {
  1175. display: flex;
  1176. align-items: center;
  1177. padding: 10rpx 30rpx 10rpx 40rpx;
  1178. line-height: 70rpx;
  1179. position: relative;
  1180. &.cell-hover {
  1181. background: #fafafa;
  1182. }
  1183. &.b-b:after {
  1184. left: 30rpx;
  1185. }
  1186. .cell-icon {
  1187. height: 32rpx;
  1188. width: 32rpx;
  1189. font-size: 22rpx;
  1190. color: #fff;
  1191. text-align: center;
  1192. line-height: 32rpx;
  1193. background: #f85e52;
  1194. border-radius: 4rpx;
  1195. margin-right: 12rpx;
  1196. &.hb {
  1197. background: #ffaa0e;
  1198. }
  1199. &.lpk {
  1200. background: #3ab54a;
  1201. }
  1202. }
  1203. .cell-more {
  1204. align-self: center;
  1205. font-size: 24rpx;
  1206. color: $font-color-light;
  1207. margin-left: 8rpx;
  1208. margin-right: -10rpx;
  1209. }
  1210. .cell-tit {
  1211. flex: 1;
  1212. font-size: 26rpx;
  1213. color: $font-color-light;
  1214. margin-right: 10rpx;
  1215. }
  1216. .cell-tip {
  1217. font-size: 26rpx;
  1218. color: $font-color-dark;
  1219. &.disabled {
  1220. color: $font-color-light;
  1221. }
  1222. &.active {
  1223. color: #b3b3b3;
  1224. }
  1225. &.red {
  1226. color: $base-color;
  1227. }
  1228. }
  1229. &.desc-cell {
  1230. .cell-tit {
  1231. max-width: 90rpx;
  1232. }
  1233. }
  1234. .desc {
  1235. flex: 1;
  1236. text-align: right;
  1237. font-size: $font-base;
  1238. color: $font-color-dark;
  1239. }
  1240. }
  1241. .info {
  1242. margin: 25rpx 22rpx 0;
  1243. border-radius: 20rpx;
  1244. background: #ffffff;
  1245. padding-top: 25rpx !important;
  1246. margin-bottom: 25rpx !important;
  1247. padding: 0rpx 25rpx;
  1248. font-size: 28rpx;
  1249. color: #909399;
  1250. view {
  1251. padding-bottom: 10rpx;
  1252. }
  1253. }
  1254. .red {
  1255. color: #ff1a27;
  1256. }
  1257. /* 支付列表 */
  1258. .pay-list {
  1259. padding-left: 40rpx;
  1260. margin-top: 16rpx;
  1261. background: #fff;
  1262. .pay-item {
  1263. display: flex;
  1264. align-items: center;
  1265. padding-right: 20rpx;
  1266. line-height: 1;
  1267. height: 110rpx;
  1268. position: relative;
  1269. }
  1270. .icon-weixinzhifu {
  1271. width: 80rpx;
  1272. font-size: 40rpx;
  1273. color: #6bcc03;
  1274. }
  1275. .icon-alipay {
  1276. width: 80rpx;
  1277. font-size: 40rpx;
  1278. color: #06b4fd;
  1279. }
  1280. .icon-xuanzhong2 {
  1281. display: flex;
  1282. align-items: center;
  1283. justify-content: center;
  1284. width: 60rpx;
  1285. height: 60rpx;
  1286. font-size: 40rpx;
  1287. color: $base-color;
  1288. }
  1289. .tit {
  1290. font-size: 32rpx;
  1291. color: $font-color-dark;
  1292. flex: 1;
  1293. }
  1294. }
  1295. .footer {
  1296. position: fixed;
  1297. left: 0;
  1298. bottom: 0;
  1299. z-index: 995;
  1300. display: flex;
  1301. align-items: center;
  1302. width: 100%;
  1303. height: 90rpx;
  1304. justify-content: space-between;
  1305. font-size: 30rpx;
  1306. background-color: #fff;
  1307. z-index: 998;
  1308. color: $font-color-base;
  1309. box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  1310. .price-content {
  1311. padding-left: 30rpx;
  1312. }
  1313. .price-tip {
  1314. color: #ff383e;
  1315. margin-left: 8rpx;
  1316. }
  1317. .price {
  1318. font-size: 36rpx;
  1319. color: #ff383e;
  1320. }
  1321. .submit {
  1322. display: flex;
  1323. align-items: center;
  1324. justify-content: center;
  1325. width: 280rpx;
  1326. height: 100%;
  1327. color: #fff;
  1328. font-size: 32rpx;
  1329. background-color: $base-color;
  1330. &.submitNo {
  1331. background-color: $font-color-disabled;
  1332. }
  1333. }
  1334. }
  1335. .check_box {
  1336. margin: 0 22rpx;
  1337. padding: 0rpx 25rpx;
  1338. font-size: 28rpx;
  1339. text{
  1340. color: #3DCF35;
  1341. }
  1342. .ziti-text {
  1343. color: $base-color;
  1344. text-decoration: underline;
  1345. }
  1346. }
  1347. /* 优惠券面板 */
  1348. .mask {
  1349. display: flex;
  1350. align-items: flex-end;
  1351. position: fixed;
  1352. left: 0;
  1353. top: var(--window-top);
  1354. bottom: 0;
  1355. width: 100%;
  1356. background: rgba(0, 0, 0, 0);
  1357. z-index: 9995;
  1358. transition: 0.3s;
  1359. .mask-content {
  1360. width: 100%;
  1361. max-height: 70vh;
  1362. background: #f3f3f3;
  1363. transform: translateY(100%);
  1364. transition: 0.3s;
  1365. overflow-y: scroll;
  1366. border-top-left-radius: 25rpx;
  1367. border-top-right-radius: 25rpx;
  1368. .name {
  1369. width: 100%;
  1370. text-align: center;
  1371. padding: 15rpx 15rpx;
  1372. margin-top: 15rpx;
  1373. }
  1374. }
  1375. &.none {
  1376. display: none;
  1377. }
  1378. &.show {
  1379. background: rgba(0, 0, 0, 0.4);
  1380. .mask-content {
  1381. transform: translateY(0);
  1382. }
  1383. }
  1384. }
  1385. /* 优惠券列表 */
  1386. .coupon-item {
  1387. margin: 20rpx 24rpx;
  1388. background: #fff;
  1389. font-size: 26rpx;
  1390. height: 170rpx;
  1391. .left {
  1392. background: #eef9f1;
  1393. width: 28%;
  1394. height: 170rpx;
  1395. text-align: center;
  1396. color: #2dbd59;
  1397. .left-price {
  1398. padding-top: 25%;
  1399. text {
  1400. font-size: 59rpx;
  1401. font-weight: bold;
  1402. }
  1403. }
  1404. }
  1405. .right {
  1406. width: 72%;
  1407. height: 170rpx;
  1408. padding: 0rpx 25rpx;
  1409. .info-name {
  1410. font-weight: bold;
  1411. font-size: 30rpx;
  1412. }
  1413. .info-tip {
  1414. color: #999999;
  1415. font-size: 22rpx;
  1416. padding: 5rpx 0rpx;
  1417. }
  1418. .right-submit {
  1419. background: #2dbd59;
  1420. color: #ffffff;
  1421. border-radius: 25rpx;
  1422. padding: 10rpx 15rpx;
  1423. }
  1424. }
  1425. }
  1426. //配送券
  1427. .deliveryState {
  1428. border-radius: 15rpx;
  1429. margin: 20rpx 24rpx;
  1430. height: 200rpx;
  1431. overflow: hidden;
  1432. background: #ffffff;
  1433. .list-interval {
  1434. border: 1px dashed $border-color-light;
  1435. height: 100%;
  1436. .top,
  1437. .bottom {
  1438. border-radius: 100rpx;
  1439. width: 30rpx;
  1440. height: 30rpx;
  1441. position: absolute;
  1442. background-color: $page-color-base;
  1443. right: -15rpx;
  1444. }
  1445. .top {
  1446. top: -18rpx;
  1447. }
  1448. .bottom {
  1449. bottom: -18rpx;
  1450. }
  1451. }
  1452. .list-money {
  1453. height: 100%;
  1454. image {
  1455. height: 100%;
  1456. width: 20rpx;
  1457. margin-right: 10rpx;
  1458. position: relative;
  1459. }
  1460. .list-money-text {
  1461. width: 220rpx;
  1462. padding: 0 25rpx;
  1463. text-align: center;
  1464. color: #fc4141;
  1465. .tit {
  1466. padding: 15rpx 0rpx;
  1467. font-size: 55rpx;
  1468. font-weight: bold;
  1469. }
  1470. .price {
  1471. padding-bottom: 25rpx;
  1472. color: #999999;
  1473. font-size: 24rpx;
  1474. }
  1475. }
  1476. }
  1477. .row_list_right {
  1478. width: 60%;
  1479. font-size: 26rpx;
  1480. .title {
  1481. text {
  1482. color: #fc4141;
  1483. font-size: 30rpx;
  1484. }
  1485. }
  1486. .text {
  1487. padding: 7rpx;
  1488. color: #999999;
  1489. }
  1490. .use {
  1491. margin-top: 15rpx;
  1492. text {
  1493. border: 2rpx solid #313131;
  1494. padding: 7rpx 20rpx;
  1495. border-radius: 25rpx;
  1496. }
  1497. }
  1498. }
  1499. }
  1500. //商品券
  1501. .goodsState {
  1502. border-radius: 15rpx;
  1503. margin: 20rpx 24rpx;
  1504. height: 200rpx;
  1505. overflow: hidden;
  1506. .img {
  1507. width: 30rpx;
  1508. height: 200rpx;
  1509. image {
  1510. height: 100%;
  1511. width: 100%;
  1512. }
  1513. }
  1514. .delivery-box {
  1515. background: linear-gradient(270deg, rgba(111, 178, 47, 1) 0%, rgba(160, 217, 106, 1) 100%);
  1516. width: 100%;
  1517. height: 100%;
  1518. color: #ffffff;
  1519. .list-money {
  1520. height: 100%;
  1521. font-size: 22rpx;
  1522. text-align: center;
  1523. padding-top: 4%;
  1524. padding-left: 10rpx;
  1525. .tit {
  1526. text {
  1527. font-size: 80rpx;
  1528. }
  1529. }
  1530. }
  1531. .row_list_right {
  1532. width: 43%;
  1533. font-size: 26rpx;
  1534. .title {
  1535. text {
  1536. color: #fc4141;
  1537. font-size: 30rpx;
  1538. }
  1539. }
  1540. .text {
  1541. padding: 7rpx;
  1542. color: #ffffff;
  1543. font-size: 20rpx;
  1544. }
  1545. }
  1546. .use {
  1547. margin-top: 15rpx;
  1548. text {
  1549. background-color: #ffffff;
  1550. font-size: 26rpx;
  1551. padding: 12rpx 30rpx;
  1552. border-radius: 25rpx;
  1553. color: rgba(111, 178, 47, 1);
  1554. }
  1555. }
  1556. }
  1557. }
  1558. .pop-box {
  1559. background: #FFFFFF;
  1560. width: 500rpx;
  1561. border-radius: 15rpx;
  1562. text-align: center;
  1563. .pop-tit {
  1564. font-size: $font-base;
  1565. padding-top: 60rpx;
  1566. }
  1567. .pop-buttom {
  1568. display: flex;
  1569. align-items: center;
  1570. margin-top: 40rpx;
  1571. border-bottom-left-radius: 15rpx;
  1572. border-bottom-right-radius: 15rpx;
  1573. border: 1px solid #f0f0f0;
  1574. height: 80rpx;
  1575. .pop-sub {
  1576. flex: 1;
  1577. text-align: center;
  1578. font-size: $font-base;
  1579. border-right: 1px solid #f0f0f0;
  1580. &:last-of-type {
  1581. border-right: 0;
  1582. }
  1583. }
  1584. }
  1585. }
  1586. .Mask-box {
  1587. margin: auto;
  1588. padding: 50rpx 50rpx;
  1589. width: 80%;
  1590. height: 450rpx;
  1591. top: 500rpx;
  1592. left: 10%;
  1593. background-color: #ffffff;
  1594. border-radius: 15rpx;
  1595. .title {
  1596. font-size: 35rpx;
  1597. font-weight: 700;
  1598. }
  1599. .text {
  1600. font-size: 30rpx;
  1601. color: #848484;
  1602. padding-top: 50rpx;
  1603. }
  1604. .weixin {
  1605. background: linear-gradient(90deg, rgba(36, 214, 78, 1), rgba(45, 187, 89, 1));
  1606. width: 65%;
  1607. margin: 70rpx auto;
  1608. color: #ffffff;
  1609. border-radius: 50rpx;
  1610. border: none;
  1611. }
  1612. }
  1613. </style>