|
|
- <template>
- <view class="place-order">
- <uv-popup ref="popup" @change="change" mode="bottom">
- <view class="place-order-content">
-
- <view class="place-order-title">
- <image src="@/static/image/多人下单.webp" mode="aspectFit" class="place-order-title-image"></image>
- <text class="number">2563</text><text>人下单</text>
- </view>
-
- <!-- 选择取餐地点 -->
- <view class="place-order-address">
- <uv-icon name="map-fill" color="#019245" size="55rpx">
- </uv-icon>
- <text style="font-size: 42rpx;">
- 请选择取餐地点
- </text>
- <view class="place-order-address-arrow">
- <uv-icon name="arrow-right" size="40rpx">
- </uv-icon>
- </view>
- </view>
-
- <uv-gap height="20rpx" bgColor="#F7F7F7" />
-
- <!-- 货品信息 -->
- <view class="item">
- <image src="@/static/image/红烧肉.png" mode="aspectFill" class="item-image"></image>
- <view style="font-size: 36rpx;">
- <view>豆角炒鸡蛋</view>
- <view style="color: red; ">¥9.9</view>
- <view style="margin-top: 30rpx;">
- <uv-number-box v-model="value" button-size="36"></uv-number-box>
- </view>
- </view>
- </view>
-
- <!-- 选项框 -->
- <uv-radio-group v-model="payMethod">
- <view class="option-box">
- <view class="option-box-item">
- <uv-icon name="weixin-circle-fill" size="70rpx" color="#019245" />
- <text style="flex: 1;">
- 微信支付
- </text>
- <uv-radio activeColor="#019245" size="40rpx" name="weixin" />
- </view>
- <view class="option-box-item">
- <uv-icon name="red-packet" size="70rpx" color="#019245" />
- <text style="flex: 1;">
- 账户余额
- <text style="color: gray; margin-left: 20rpx;">(余额: ¥0)
- </text>
- </text>
- <uv-radio activeColor="#019245" size="40rpx" name="account" />
- </view>
- </view>
- </uv-radio-group>
-
- <uv-gap height="20rpx" bgColor="#F7F7F7" />
-
- <!-- 优惠 -->
- <view class="discount">
- <text style="font-size: 35rpx;">优惠</text>
- <view style="display: flex; align-items: center; gap: 20rpx">
- <image src="@/static/image/券.webp" mode="aspectFill" class="discount-image" />
- <text>新用户立减</text>
- <text style="color: red;">-¥2</text>
- </view>
- </view>
-
- <uv-gap height="20rpx" bgColor="#F7F7F7" />
-
- <!-- 备注 -->
- <view class="remark">
- <text style="align-self: start;">备注</text>
- <textarea class="remark-textarea" placeholder="请输入您需要备注的内容" />
- </view>
-
- <!-- 购物车与支付 -->
- <view class="cart-pay">
- <view class="cart">
- <uv-icon name="shopping-cart-fill" size="60rpx" color="#019245" label="加入购物车" labelPos="bottom"
- labelSize="25rpx" />
- </view>
- <view class="pay">
- 立即支付
- </view>
- </view>
- </view>
- </uv-popup>
- </view>
- </template>
-
- <script>
- export default {
- name: 'placeOrder',
- data() {
- return {
- value: 1,
- payMethod: 'weixin'
- }
- },
- methods: {
- // 添加open方法,用于外部调用打开弹窗
- open() {
- this.$refs.popup.open();
- },
- // 添加change方法,用于处理弹窗状态变化
- change(e) {
- console.log('弹窗状态变化:', e);
- // 可以在这里添加弹窗打开或关闭后的逻辑处理
- }
- },
- mounted(){
- this.open()
- }
- }
- </script>
-
- <style lang="scss" scoped>
- .place-order-title{
- font-size: 35rpx;
- height: 90rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- .number{
- color: $uni-color;
- }
- .text{
- color: #000;
- }
- .place-order-title-image{
- width: 100rpx;
- height: 50rpx;
- }
- }
- .place-order-address{
- display: flex;
- height: 80rpx;
- line-height: 80rpx;
- // background-color: red;
- gap: 30rpx;
- padding-left: 20rpx;
- position: relative;
- text{
- font-size: 32rpx;
- font-weight: 500;
- }
- .place-order-address-arrow{
- position: absolute;
- right: 20rpx;
- top: 50%;
- transform: translateY(-50%);
- }
- }
- .item{
- display: flex;
- padding: 40rpx;
- gap: 40rpx;
- &-image{
- width: 250rpx;
- height: 200rpx;
- }
- }
- .option-box{
- display: flex;
- flex-direction: column;
- gap: 40rpx;
- width: 100%;
- &-item{
- display: flex;
- gap: 20rpx;
- align-items: center;
- font-size: 32rpx;
- padding: 0 40rpx;
- }
- }
- .discount{
- height: 130rpx;
- display: flex;
- align-items: center;
- width: 90%;
- justify-content: space-between;
- padding:0rpx 40rpx 0rpx 40rpx;
- // gap: 20rpx;
- .discount-image{
- width: 36rpx;
- height: 36rpx;
- border-radius: 10rpx;
- }
- }
- .remark{
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 20rpx 40rpx;
- // background-color: red;
-
- text{
- font-size: 32rpx;
- font-weight: 500;
- }
- .remark-textarea{
- width: 80%;
- height: 180rpx;
- // border: 1rpx solid #000;
- // border-radius: 10rpx;
- // padding: 20rpx;
- }
- }
- .cart-pay{
- // background-color: red;
- height: 130rpx;
- display: flex;
- .cart{
- width: 30%;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .pay{
- width: 70%;
- background-color: $uni-color;
- color: #fff;
- text-align: center;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 32rpx;
- }
- }
- </style>
|