t-select-coupons.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336
  1. <template>
  2. <view>
  3. <tui-bottom-popup :show="show" @close="close">
  4. <view class="tui-coupon__box">
  5. <view class="tui-coupon__title">
  6. <text>优惠券</text>
  7. <view class="tui-icon-close" @tap="close">
  8. <tui-icon name="shut" :size="22" color="#BFBFBF"></tui-icon>
  9. </view>
  10. </view>
  11. <scroll-view scroll-y class="tui-coupon__list">
  12. <radio-group @change="radioChange">
  13. <label class="tui-not-used tui-top20">
  14. <text>不使用优惠券</text>
  15. <radio value="-1" class="tui-coupon-radio" color="#e41f19" />
  16. </label>
  17. <label v-for="(item, index) in couponList" :key="index">
  18. <view class="tui-coupon-item tui-top20">
  19. <image src="/static/images/mall/coupon/bg_coupon_3x.png" class="tui-coupon-bg" mode="widthFix"></image>
  20. <view class="tui-coupon-item-left">
  21. <view class="tui-coupon-price-box">
  22. <view class="tui-coupon-price-sign" v-if="item.coupon_type==10">¥</view>
  23. <view class="tui-coupon-price" v-if="item.coupon_type==10">{{item.reduce_price}}</view>
  24. <view class="tui-coupon-price" v-if="item.coupon_type==20">{{item.discount}}</view>
  25. <view class="tui-coupon-price-sign" v-if="item.coupon_type==20">折</view>
  26. </view>
  27. <view class="tui-coupon-intro">满{{item.min_price}}元可用</view>
  28. </view>
  29. <view class="tui-coupon-item-right">
  30. <view class="tui-coupon-content">
  31. <view class="tui-coupon-title-box">
  32. <view class="tui-coupon-btn">全场券</view>
  33. <view class="tui-coupon-title">{{item.name}}</view>
  34. </view>
  35. <view class="tui-coupon-rule">
  36. <view class="tui-rule-box tui-padding-btm">
  37. <view class="tui-coupon-circle"></view>
  38. <view class="tui-coupon-text">不可叠加使用</view>
  39. </view>
  40. <view class="tui-rule-box">
  41. <view class="tui-coupon-circle"></view>
  42. <view v-if="item.expire_type==10" class="tui-coupon-text">自领取之日起{{item.expire_day}}天有效
  43. </view>
  44. <view v-if="item.expire_type==20" class="tui-coupon-text">
  45. {{item.start_time}}至{{item.end_time}}
  46. </view>
  47. </view>
  48. </view>
  49. </view>
  50. <radio :value="index" class="tui-coupon-radio" color="#e41f19" :checked="selIndex==index" />
  51. </view>
  52. </view>
  53. </label>
  54. </radio-group>
  55. <view class="tui-seat__box tui-top20"></view>
  56. </scroll-view>
  57. <view class="tui-btn-pay">
  58. <tui-button height="88rpx" type="danger" shape="circle" shadow @click="btnConfirm">确定</tui-button>
  59. </view>
  60. </view>
  61. </tui-bottom-popup>
  62. </view>
  63. </template>
  64. <script>
  65. export default {
  66. name: 'tSelectCoupons',
  67. props: {
  68. couponList: {
  69. type: Array,
  70. default () {
  71. return [{}, {}, {}, {}, {}];
  72. }
  73. },
  74. //控制显示
  75. show: {
  76. type: Boolean,
  77. default: false
  78. },
  79. page: {
  80. type: Number,
  81. default: 1
  82. }
  83. },
  84. data() {
  85. return {
  86. selIndex:'-1'
  87. };
  88. },
  89. methods: {
  90. btnConfirm() {
  91. this.$emit("ChangeCoupon", {selIndex:this.selIndex})
  92. },
  93. radioChange(e) {
  94. this.selIndex = e.target.value
  95. },
  96. close() {
  97. this.$emit("close", {})
  98. },
  99. }
  100. };
  101. </script>
  102. <style scoped>
  103. .tui-coupon__box {
  104. width: 100%;
  105. }
  106. .tui-coupon__title {
  107. width: 100%;
  108. padding: 40rpx 30rpx;
  109. box-sizing: border-box;
  110. display: flex;
  111. align-items: center;
  112. justify-content: center;
  113. position: relative;
  114. }
  115. .tui-icon-close {
  116. position: absolute;
  117. right: 30rpx;
  118. top: 50%;
  119. transform: translateY(-50%);
  120. }
  121. .tui-coupon__list {
  122. width: 100%;
  123. height: 640rpx;
  124. padding: 0 30rpx;
  125. box-sizing: border-box;
  126. background-color: #FAFAFA;
  127. }
  128. .tui-not-used{
  129. width: 100%;
  130. display: flex;
  131. align-items: center;
  132. justify-content: space-between;
  133. font-size: 28rpx;
  134. color: #333333;
  135. background-color: #fff;
  136. padding:20rpx 30rpx;
  137. box-sizing: border-box;
  138. border-radius:6rpx;
  139. }
  140. .tui-coupon-item {
  141. width: 100%;
  142. height: 210rpx;
  143. position: relative;
  144. display: flex;
  145. align-items: center;
  146. padding-right: 30rpx;
  147. box-sizing: border-box;
  148. overflow: hidden;
  149. }
  150. .tui-coupon-bg {
  151. width: 100%;
  152. height: 210rpx;
  153. position: absolute;
  154. left: 0;
  155. top: 0;
  156. z-index: 1;
  157. }
  158. .tui-coupon-sign {
  159. height: 110rpx;
  160. width: 110rpx;
  161. position: absolute;
  162. z-index: 9;
  163. top: -30rpx;
  164. right: 40rpx;
  165. }
  166. .tui-coupon-item-left {
  167. width: 218rpx;
  168. height: 210rpx;
  169. position: relative;
  170. z-index: 2;
  171. display: flex;
  172. align-items: center;
  173. justify-content: center;
  174. flex-direction: column;
  175. flex-shrink: 0;
  176. }
  177. .tui-coupon-price-box {
  178. display: flex;
  179. color: #e41f19;
  180. align-items: flex-end;
  181. }
  182. .tui-coupon-price-sign {
  183. font-size: 30rpx;
  184. }
  185. .tui-coupon-price {
  186. font-size: 70rpx;
  187. line-height: 68rpx;
  188. font-weight: bold;
  189. }
  190. .tui-price-small {
  191. font-size: 58rpx !important;
  192. line-height: 56rpx !important;
  193. }
  194. .tui-coupon-intro {
  195. background: #f7f7f7;
  196. padding: 8rpx 10rpx;
  197. font-size: 26rpx;
  198. line-height: 26rpx;
  199. font-weight: 400;
  200. color: #666;
  201. margin-top: 18rpx;
  202. }
  203. .tui-coupon-item-right {
  204. flex: 1;
  205. height: 210rpx;
  206. position: relative;
  207. z-index: 2;
  208. display: flex;
  209. align-items: center;
  210. justify-content: space-between;
  211. padding-left: 24rpx;
  212. box-sizing: border-box;
  213. overflow: hidden;
  214. }
  215. .tui-coupon-content {
  216. width: 82%;
  217. display: flex;
  218. flex-direction: column;
  219. justify-content: center;
  220. }
  221. .tui-coupon-title-box {
  222. display: flex;
  223. align-items: center;
  224. }
  225. .tui-coupon-btn {
  226. padding: 6rpx;
  227. background: #ffebeb;
  228. color: #e41f19;
  229. font-size: 25rpx;
  230. line-height: 25rpx;
  231. display: flex;
  232. align-items: center;
  233. justify-content: center;
  234. transform: scale(0.9);
  235. transform-origin: 0 center;
  236. border-radius: 4rpx;
  237. flex-shrink: 0;
  238. }
  239. .tui-coupon-title {
  240. width: 100%;
  241. font-size: 26rpx;
  242. color: #333;
  243. white-space: nowrap;
  244. overflow: hidden;
  245. text-overflow: ellipsis;
  246. }
  247. .tui-coupon-rule {
  248. padding-top: 52rpx;
  249. }
  250. .tui-rule-box {
  251. display: flex;
  252. align-items: center;
  253. transform: scale(0.8);
  254. transform-origin: 0 100%;
  255. }
  256. .tui-padding-btm {
  257. padding-bottom: 6rpx;
  258. }
  259. .tui-coupon-circle {
  260. width: 8rpx;
  261. height: 8rpx;
  262. background: rgb(160, 160, 160);
  263. border-radius: 50%;
  264. }
  265. .tui-coupon-text {
  266. font-size: 28rpx;
  267. line-height: 28rpx;
  268. font-weight: 400;
  269. color: #666;
  270. padding-left: 8rpx;
  271. white-space: nowrap;
  272. }
  273. .tui-top20 {
  274. margin-top: 20rpx;
  275. }
  276. .tui-coupon-title {
  277. font-size: 28rpx;
  278. line-height: 28rpx;
  279. }
  280. .tui-coupon-radio {
  281. transform: scale(0.7);
  282. transform-origin: 100% center;
  283. }
  284. /* #ifdef APP-PLUS || MP */
  285. .wx-radio-input {
  286. margin-right: 0 !important;
  287. }
  288. /* #endif */
  289. /* #ifdef H5 */
  290. >>>uni-radio .uni-radio-input {
  291. margin-right: 0 !important;
  292. }
  293. /* #endif */
  294. .tui-seat__box {
  295. width: 100%;
  296. height: 1rpx;
  297. }
  298. .tui-btn-pay {
  299. width: 100%;
  300. padding: 20rpx 60rpx 40rpx;
  301. box-sizing: border-box;
  302. }
  303. </style>