敢为人鲜小程序前端代码仓库
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.

369 lines
11 KiB

1 month ago
  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" />
  7. <text class="number">{{ item.sales }}</text><text class="text">人下单</text>
  8. <view class="place-order-title-close" @click="close">
  9. <uv-icon name="close" size="40rpx"></uv-icon>
  10. </view>
  11. </view>
  12. <!-- 选择取餐地点 -->
  13. <view class="place-order-address" @click="gotoPickupPoint">
  14. <uv-icon name="map-fill" color="#019245" size="55rpx">
  15. </uv-icon>
  16. <text style="font-size: 42rpx;" v-show="!pickupPoint">
  17. 请选择取餐地点
  18. </text>
  19. <view v-if="pickupPoint" class="place-order-address-content">
  20. <view class="place-order-address-content-name">
  21. {{ pickupPoint.name }}{{ pickupPoint.phone }}
  22. </view>
  23. <view class="place-order-address-content-address"> {{ pickupPoint.area }} {{ pickupPoint.address }} </view>
  24. </view>
  25. <view class="place-order-address-arrow">
  26. <uv-icon name="arrow-right" size="40rpx">
  27. </uv-icon>
  28. </view>
  29. </view>
  30. <uv-gap height="20rpx" bgColor="#F7F7F7" />
  31. <!-- 货品信息 -->
  32. <view class="item">
  33. <image :src="item.image" mode="aspectFill" class="item-image"></image>
  34. <view style="font-size: 36rpx;">
  35. <view>{{ item.name }}</view>
  36. <view style="color: red; ">{{ item.price }}</view>
  37. <view style="margin-top: 30rpx;">
  38. <uv-number-box v-model="value" button-size="36"></uv-number-box>
  39. </view>
  40. </view>
  41. </view>
  42. <!-- 选项框 -->
  43. <uv-radio-group v-model="payMethod">
  44. <view class="option-box" >
  45. <view class="option-box-item">
  46. <uv-icon name="weixin-circle-fill" size="70rpx" color="#019245" />
  47. <text style="flex: 1;">
  48. 微信支付
  49. </text>
  50. <uv-radio activeColor="#019245" size="40rpx" name="0" />
  51. </view>
  52. <view class="option-box-item">
  53. <uv-icon name="red-packet" size="70rpx" color="#019245" />
  54. <text style="flex: 1;">
  55. 账户余额
  56. <text style="color: gray; margin-left: 20rpx;">(余额: {{ userInfo.balance ? userInfo.balance.toFixed(2) : 0 }})</text>
  57. </text>
  58. <uv-radio activeColor="#019245" size="40rpx" name="1" />
  59. </view>
  60. </view>
  61. </uv-radio-group>
  62. <uv-gap height="20rpx" bgColor="#F7F7F7" />
  63. <!-- 优惠 -->
  64. <view class="discount">
  65. <text style="font-size: 35rpx;">优惠</text>
  66. <view style="display: flex; align-items: center; gap: 20rpx" @click="gotoCoupon">
  67. <image src="@/static/image/券.webp" mode="aspectFill" class="discount-image" />
  68. <text>{{ couponData.couponId_dictText || '请选择您的优惠卷' }}</text>
  69. <text style="color: red;">-{{ couponData.discount || 0 }}</text>
  70. </view>
  71. </view>
  72. <uv-gap height="20rpx" bgColor="#F7F7F7" />
  73. <!-- 备注 -->
  74. <view class="remark">
  75. <text style="align-self: start;">备注</text>
  76. <textarea class="remark-textarea" placeholder="请输入您需要备注的内容" v-model="remark" />
  77. </view>
  78. <!-- 购物车与支付 -->
  79. <view class="cart-pay">
  80. <view class="cart" @click="$emit('addCart')">
  81. <uv-icon name="shopping-cart-fill" size="60rpx" color="#019245" label="加入购物车" labelPos="bottom"
  82. labelSize="25rpx" />
  83. </view>
  84. <view class="pay" @tap="createOrder">
  85. 立即支付
  86. </view>
  87. </view>
  88. </view>
  89. </uv-popup>
  90. </view>
  91. </template>
  92. <script>
  93. import { mapState } from 'vuex'
  94. export default {
  95. name: 'placeOrder',
  96. data() {
  97. return {
  98. value: 1,
  99. payMethod: '0',
  100. pickupPoint: null,
  101. remark: '',
  102. }
  103. },
  104. props: {
  105. item: {
  106. type: Object,
  107. default: () => {}
  108. }
  109. },
  110. computed: {
  111. ...mapState(['userInfo']),
  112. ...mapState(['couponData']),
  113. priceAll () {
  114. return this.item.price * this.value
  115. },
  116. goodss () {
  117. return `${this.item.id},${this.value},${this.priceAll};`
  118. }
  119. },
  120. methods: {
  121. // 跳转到优惠卷选择页面
  122. gotoCoupon() {
  123. this.$utils.navigateTo('/pages_order/mine/coupon?usein=1')
  124. },
  125. // 添加open方法,用于外部调用打开弹窗
  126. open() {
  127. this.$refs.popup.open();
  128. },
  129. // 添加close方法,用于关闭弹窗
  130. close(){
  131. this.$refs.popup.close();
  132. },
  133. // 添加change方法,用于处理弹窗状态变化
  134. change(e) {
  135. console.log('弹窗状态变化:', e);
  136. // 可以在这里添加弹窗打开或关闭后的逻辑处理
  137. },
  138. // 跳转到取餐点选择页面
  139. gotoPickupPoint() {
  140. this.$utils.navigateTo('/pages_order/location/pickupPoint')
  141. },
  142. // 获取并监听取餐点选择事件
  143. listenPickupPoint() {
  144. const pickupPointStr = uni.getStorageSync('selectedPickupPoint');
  145. if (pickupPointStr) {
  146. this.pickupPoint = JSON.parse(pickupPointStr);
  147. }
  148. uni.$on('updatePickupPoint', (point) => {
  149. this.pickupPoint = point;
  150. })
  151. },
  152. // 创建订单
  153. createOrder(){
  154. if (!this.pickupPoint) {
  155. uni.showToast({
  156. title: '请选择取餐地点',
  157. icon: 'error'
  158. })
  159. return
  160. }
  161. if (this.payMethod == '1' && this.userInfo.balance < this.priceAll) {
  162. uni.showToast({
  163. title: '余额不足',
  164. icon: 'error'
  165. })
  166. return
  167. }
  168. uni.showLoading({
  169. title: '下单中...'
  170. })
  171. this.$api('createOrder', {
  172. priceAll: this.priceAll,
  173. pricePay: this.priceAll - ( this.couponData.discount || 0 ),
  174. pricePreferential: this.couponData.discount || 0,
  175. payType: this.payMethod,
  176. leaderId: this.pickupPoint.id,
  177. couponId: this.couponData.id || '',
  178. goodss: this.goodss,
  179. remark: this.remark
  180. }, res => {
  181. uni.hideLoading()
  182. if (res.code === 200) {
  183. if (this.payMethod == '0') {
  184. uni.requestPaymentWxPay(res)
  185. .then(n => {
  186. setTimeout(uni.redirectTo, 700, {
  187. url: '/pages/index/order?tabIndex=1'
  188. })
  189. })
  190. }else {
  191. uni.showToast({
  192. title: '下单成功',
  193. icon: 'success'
  194. })
  195. setTimeout(uni.redirectTo, 700, {
  196. url: '/pages/index/order?tabIndex=1'
  197. })
  198. }
  199. }
  200. })
  201. }
  202. },
  203. mounted(){
  204. this.listenPickupPoint();
  205. },
  206. beforeDestroy() {
  207. uni.$off('updatePickupPoint');
  208. }
  209. }
  210. </script>
  211. <style lang="scss" scoped>
  212. .place-order-title{
  213. font-size: 35rpx;
  214. height: 90rpx;
  215. display: flex;
  216. align-items: center;
  217. justify-content: center;
  218. position: relative;
  219. .number{
  220. color: $uni-color;
  221. }
  222. .text{
  223. color: #000;
  224. }
  225. .place-order-title-image{
  226. width: 100rpx;
  227. height: 50rpx;
  228. }
  229. .place-order-title-close{
  230. position: absolute;
  231. right: 20rpx;
  232. top: 50%;
  233. transform: translateY(-50%);
  234. color: $uni-color-third;
  235. }
  236. }
  237. .place-order-address{
  238. display: flex;
  239. height: 80rpx;
  240. line-height: 80rpx;
  241. align-items: center;
  242. // background-color: red;
  243. gap: 30rpx;
  244. padding-left: 20rpx;
  245. position: relative;
  246. text{
  247. font-size: 32rpx;
  248. font-weight: 500;
  249. }
  250. &-arrow{
  251. position: absolute;
  252. right: 20rpx;
  253. top: 50%;
  254. transform: translateY(-50%);
  255. }
  256. &-content{
  257. display: flex;
  258. flex-direction: column;
  259. justify-content: space-around;
  260. gap: 0rpx;
  261. height: 100%;
  262. // width: 100%;
  263. &-name{
  264. height: 30rpx;
  265. line-height: 30rpx;
  266. }
  267. &-address{
  268. height: 30rpx;
  269. line-height: 30rpx;
  270. width: 90%;
  271. text-overflow: ellipsis; // 三个连着一起才会出现省略号
  272. overflow: hidden;
  273. white-space: nowrap;
  274. }
  275. }
  276. }
  277. .item{
  278. display: flex;
  279. padding: 40rpx;
  280. gap: 40rpx;
  281. &-image{
  282. width: 250rpx;
  283. height: 200rpx;
  284. }
  285. }
  286. .option-box{
  287. display: flex;
  288. flex-direction: column;
  289. gap: 40rpx;
  290. width: 100%;
  291. &-item{
  292. display: flex;
  293. gap: 20rpx;
  294. align-items: center;
  295. font-size: 32rpx;
  296. padding: 0 40rpx;
  297. }
  298. }
  299. .discount{
  300. height: 130rpx;
  301. display: flex;
  302. align-items: center;
  303. width: 90%;
  304. justify-content: space-between;
  305. padding:0rpx 40rpx 0rpx 40rpx;
  306. // gap: 20rpx;
  307. .discount-image{
  308. width: 36rpx;
  309. height: 36rpx;
  310. border-radius: 10rpx;
  311. }
  312. }
  313. .remark{
  314. display: flex;
  315. align-items: center;
  316. justify-content: space-between;
  317. padding: 20rpx 40rpx;
  318. // background-color: red;
  319. text{
  320. font-size: 32rpx;
  321. font-weight: 500;
  322. }
  323. .remark-textarea{
  324. width: 80%;
  325. height: 180rpx;
  326. // border: 1rpx solid #000;
  327. // border-radius: 10rpx;
  328. // padding: 20rpx;
  329. }
  330. }
  331. .cart-pay{
  332. // background-color: red;
  333. height: 130rpx;
  334. display: flex;
  335. .cart{
  336. width: 30%;
  337. display: flex;
  338. align-items: center;
  339. justify-content: center;
  340. }
  341. .pay{
  342. width: 70%;
  343. background-color: $uni-color;
  344. color: #fff;
  345. text-align: center;
  346. display: flex;
  347. align-items: center;
  348. justify-content: center;
  349. font-size: 32rpx;
  350. }
  351. }
  352. </style>