敢为人鲜小程序前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

233 lines
6.8 KiB

  1. <template>
  2. <view class="place-order">
  3. <uv-popup ref="popup" @change="change" mode="bottom">
  4. <view class="place-order-content">
  5. <view class="place-order-title">
  6. <image src="@/static/image/多人下单.webp" mode="aspectFit" class="place-order-title-image"></image>
  7. <text class="number">2563</text><text>人下单</text>
  8. </view>
  9. <!-- 选择取餐地点 -->
  10. <view class="place-order-address">
  11. <uv-icon name="map-fill" color="#019245" size="55rpx">
  12. </uv-icon>
  13. <text style="font-size: 42rpx;">
  14. 请选择取餐地点
  15. </text>
  16. <view class="place-order-address-arrow">
  17. <uv-icon name="arrow-right" size="40rpx">
  18. </uv-icon>
  19. </view>
  20. </view>
  21. <uv-gap height="20rpx" bgColor="#F7F7F7" />
  22. <!-- 货品信息 -->
  23. <view class="item">
  24. <image src="@/static/image/红烧肉.png" mode="aspectFill" class="item-image"></image>
  25. <view style="font-size: 36rpx;">
  26. <view>豆角炒鸡蛋</view>
  27. <view style="color: red; ">9.9</view>
  28. <view style="margin-top: 30rpx;">
  29. <uv-number-box v-model="value" button-size="36"></uv-number-box>
  30. </view>
  31. </view>
  32. </view>
  33. <!-- 选项框 -->
  34. <uv-radio-group v-model="payMethod">
  35. <view class="option-box">
  36. <view class="option-box-item">
  37. <uv-icon name="weixin-circle-fill" size="70rpx" color="#019245" />
  38. <text style="flex: 1;">
  39. 微信支付
  40. </text>
  41. <uv-radio activeColor="#019245" size="40rpx" name="weixin" />
  42. </view>
  43. <view class="option-box-item">
  44. <uv-icon name="red-packet" size="70rpx" color="#019245" />
  45. <text style="flex: 1;">
  46. 账户余额
  47. <text style="color: gray; margin-left: 20rpx;">(余额: 0)
  48. </text>
  49. </text>
  50. <uv-radio activeColor="#019245" size="40rpx" name="account" />
  51. </view>
  52. </view>
  53. </uv-radio-group>
  54. <uv-gap height="20rpx" bgColor="#F7F7F7" />
  55. <!-- 优惠 -->
  56. <view class="discount">
  57. <text style="font-size: 35rpx;">优惠</text>
  58. <view style="display: flex; align-items: center; gap: 20rpx">
  59. <image src="@/static/image/券.webp" mode="aspectFill" class="discount-image" />
  60. <text>新用户立减</text>
  61. <text style="color: red;">-2</text>
  62. </view>
  63. </view>
  64. <uv-gap height="20rpx" bgColor="#F7F7F7" />
  65. <!-- 备注 -->
  66. <view class="remark">
  67. <text style="align-self: start;">备注</text>
  68. <textarea class="remark-textarea" placeholder="请输入您需要备注的内容" />
  69. </view>
  70. <!-- 购物车与支付 -->
  71. <view class="cart-pay">
  72. <view class="cart">
  73. <uv-icon name="shopping-cart-fill" size="60rpx" color="#019245" label="加入购物车" labelPos="bottom"
  74. labelSize="25rpx" />
  75. </view>
  76. <view class="pay">
  77. 立即支付
  78. </view>
  79. </view>
  80. </view>
  81. </uv-popup>
  82. </view>
  83. </template>
  84. <script>
  85. export default {
  86. name: 'placeOrder',
  87. data() {
  88. return {
  89. value: 1,
  90. payMethod: 'weixin'
  91. }
  92. },
  93. methods: {
  94. // 添加open方法,用于外部调用打开弹窗
  95. open() {
  96. this.$refs.popup.open();
  97. },
  98. // 添加change方法,用于处理弹窗状态变化
  99. change(e) {
  100. console.log('弹窗状态变化:', e);
  101. // 可以在这里添加弹窗打开或关闭后的逻辑处理
  102. }
  103. },
  104. mounted(){
  105. this.open()
  106. }
  107. }
  108. </script>
  109. <style lang="scss" scoped>
  110. .place-order-title{
  111. font-size: 35rpx;
  112. height: 90rpx;
  113. display: flex;
  114. align-items: center;
  115. justify-content: center;
  116. .number{
  117. color: $uni-color;
  118. }
  119. .text{
  120. color: #000;
  121. }
  122. .place-order-title-image{
  123. width: 100rpx;
  124. height: 50rpx;
  125. }
  126. }
  127. .place-order-address{
  128. display: flex;
  129. height: 80rpx;
  130. line-height: 80rpx;
  131. // background-color: red;
  132. gap: 30rpx;
  133. padding-left: 20rpx;
  134. position: relative;
  135. text{
  136. font-size: 32rpx;
  137. font-weight: 500;
  138. }
  139. .place-order-address-arrow{
  140. position: absolute;
  141. right: 20rpx;
  142. top: 50%;
  143. transform: translateY(-50%);
  144. }
  145. }
  146. .item{
  147. display: flex;
  148. padding: 40rpx;
  149. gap: 40rpx;
  150. &-image{
  151. width: 250rpx;
  152. height: 200rpx;
  153. }
  154. }
  155. .option-box{
  156. display: flex;
  157. flex-direction: column;
  158. gap: 40rpx;
  159. width: 100%;
  160. &-item{
  161. display: flex;
  162. gap: 20rpx;
  163. align-items: center;
  164. font-size: 32rpx;
  165. padding: 0 40rpx;
  166. }
  167. }
  168. .discount{
  169. height: 130rpx;
  170. display: flex;
  171. align-items: center;
  172. width: 90%;
  173. justify-content: space-between;
  174. padding:0rpx 40rpx 0rpx 40rpx;
  175. // gap: 20rpx;
  176. .discount-image{
  177. width: 36rpx;
  178. height: 36rpx;
  179. border-radius: 10rpx;
  180. }
  181. }
  182. .remark{
  183. display: flex;
  184. align-items: center;
  185. justify-content: space-between;
  186. padding: 20rpx 40rpx;
  187. // background-color: red;
  188. text{
  189. font-size: 32rpx;
  190. font-weight: 500;
  191. }
  192. .remark-textarea{
  193. width: 80%;
  194. height: 180rpx;
  195. // border: 1rpx solid #000;
  196. // border-radius: 10rpx;
  197. // padding: 20rpx;
  198. }
  199. }
  200. .cart-pay{
  201. // background-color: red;
  202. height: 130rpx;
  203. display: flex;
  204. .cart{
  205. width: 30%;
  206. display: flex;
  207. align-items: center;
  208. justify-content: center;
  209. }
  210. .pay{
  211. width: 70%;
  212. background-color: $uni-color;
  213. color: #fff;
  214. text-align: center;
  215. display: flex;
  216. align-items: center;
  217. justify-content: center;
  218. font-size: 32rpx;
  219. }
  220. }
  221. </style>