jiangchengfeiyi-xiaochengxu/pages/order/product-waitpay/product-waitpay.vue

548 lines
13 KiB
Vue
Raw Normal View History

2024-10-19 08:31:40 +00:00
<template>
<view class="flex-col page">
<view class="flex-col justify-start">
<view class="flex-col group">
<view class="flex-col section">
<view class="flex-row justify-between">
<view class="flex-col">
<text class="self-center font text">{{ address.address }}</text>
<view class="flex-row items-center self-stretch">
<image
class="shrink-0 image_2"
:src="dingwei"
/>
<text class="font_2 text_2 ml-7">{{ address.detail }}</text>
</view>
</view>
<view class="flex-row self-start group_2">
<image
class="image_3"
:src="you_cheng"
/>
<text class="font_3 text_3">更换地址</text>
</view>
</view>
<view class="flex-row items-baseline group_3 mt-4">
<text class="font_2 text_4">{{ address.name }}</text>
<text class="font_2 text_5">{{ address.phone }}</text>
</view>
</view>
<view class="flex-col section_2 mt-8" v-for="(item , index) in product_object" :key="index">
<view class="flex-row">
<image
class="image_4"
:src="item.product_img" />
<view class="flex-col self-start group_4 ml-17">
<view class="flex-row self-stretch">
<text class="font">{{ item.product_name }}</text>
<text class="font ml-4">{{ item.product_type }}</text>
</view>
<text class="self-start font_2 text_6 mt-12">已选种类{{ item.selected_style }}</text>
<view class="flex-row self-stretch mt-12" >
<view class="flex-col justify-start items-center text-wrapper">
<text class="font_2 text_7">#{{ item.tag[0] }}</text>
</view>
<view class="flex-col justify-start items-center text-wrapper_2 ml-6">
<text class="font_2 text_8">#{{ item.tag[1] }}</text>
</view>
<view class="flex-col justify-start items-center text-wrapper_3 ml-6">
<text class="font_2 text_9">#{{ item.tag[2] }}</text>
</view>
</view>
</view>
</view>
<view class="flex-row justify-between items-center group_5">
<view class="flex-row items-center group_6">
<text class="text_10">{{ item.product_price }}</text>
<image
class="shrink-0 image_7 image_8"
:src="item.rmb_img"
/>
<text class="font text_11">.00</text>
</view>
<view class="flex-row">
<image
class="image_5"
:src="item.min_img" />
<view class="flex-col justify-start items-center text-wrapper_4 ml-2">
<text class="font text_12">1</text>
</view>
<image
class="image_6 ml-2"
:src="item.add_img"
/>
</view>
</view>
<view class="flex-row justify-end items-center group_7">
<view class="group_8">
<text class="font_2 text_13">购买商品均视为同意</text>
<text class="font_2 text_14">用户须知</text>
</view>
<image
class="shrink-0 image_9 ml-2"
:src="yiwen"
/>
</view>
</view>
<view class="flex-col section_3 mt-8">
<view class="flex-row justify-between items-center group_9">
<view class="flex-row">
<text class="font_4 text_15">商品总价</text>
<text class="font_5 text_16 ml-7">{{ num }}件商品</text>
</view>
<view class="flex-row items-center">
<image
class="shrink-0 image_10"
:src="rmb_36px"
/>
<text class="font_6">138.00</text>
</view>
</view>
<view class="flex-col mt-25">
<view class="flex-row justify-between group_10">
<text class="font_4 text_17">优惠券</text>
<view class="flex-row group_11">
<image
class="image_7 image_11"
:src="you_hei"
/>
<text class="font_5 text_18">{{ youhuijuan_num }}张优惠券可用</text>
</view>
</view>
<view class="flex-col mt-9">
<view class="flex-row justify-between items-center group_12">
<text class="font_4 text_19">{{ manjian }}{{ manjian1 }}优惠</text>
<view class="flex-row items-center">
<image
class="shrink-0 image_10 image_12"
:src="rmb_cheng"
/>
<text class="font_3 text_20"></text>
<text class="font_6 text_21"> {{ manjian1 }}.00 </text>
</view>
</view>
<view class="flex-row justify-between items-center group_13">
<text class="font_4 text_22">合计</text>
<view class="flex-row items-center">
<image
class="shrink-0 image_10"
:src="rmb_36px"
/>
<text class="font_6">{{ sumprice }}.00</text>
</view>
</view>
</view>
</view>
</view>
<view class="flex-col section_1 mt-8">
<text class="self-start font_7">订单备注</text>
<textarea class="text-wrapper_5 mt-11" placeholder="备注建议提前协商(250字以内)"></textarea>
</view>
</view>
</view>
<view class="flex-row justify-between items-center section_4 mt-194" >
<view class="flex-row items-center">
<image
class="shrink-0 image_10 image_13"
:src="rmb_huang"
/>
<text class="font_7 text_24">应付</text>
<text class="text_25">{{ sumprice }}.</text>
<text class="font_6 text_27">00</text>
</view>
<view class="flex-col justify-start items-center text-wrapper_6" @click="jump_pay"><text class="font_4 text_26">微信支付</text></view>
</view>
</view>
</template>
<script setup>
import {ref} from 'vue'
import add from '@/pages/order/product-waitpay/img/add.png';
import dingwei from '@/pages/order/product-waitpay/img/dingwei.png';
import product from '@/pages/order/product-waitpay/img/product.png';
import rmb_32 from '@/pages/order/product-waitpay/img/rmb_32.png';
import rmb_36px from '@/pages/order/product-waitpay/img/rmb_36px.png';
import rmb_cheng from '@/pages/order/product-waitpay/img/rmb_cheng.png';
import rmb_huang from '@/pages/order/product-waitpay/img/rmb_huang.png';
import short from '@/pages/order/product-waitpay/img/short.png';
import yiwen from '@/pages/order/product-waitpay/img/yiwen.png';
import you_cheng from '@/pages/order/product-waitpay/img/you_cheng.png';
import you_hei from '@/pages/order/product-waitpay/img/you_hei.png';
const jump_pay =()=> {
console.log(123)
uni.navigateTo({
url: '../../../pages/order/paysuccess/paysuccess'
})
}
const address = ref(
{
address : "黑龙江省哈尔滨市呼兰区",
detail : "学院路街道288号哈尔滨华德学院",
name : '张三',
phone : '15888610253'
}
)
const product_object = ref([
{
product_name : "非遗绒花",
product_type : "材料包",
selected_style : "紫色",
product_num : 1,
product_price : 138,
product_img : product,
rmb_img : rmb_32,
min_img : short,
add_img : add,
tag : ["绒花","体验包","送亲友"]
}
])
const num = ref(1)
const price = ref(138)
const youhuijuan_num = ref(1)
const manjian = ref(120)
const manjian1 = ref(50)
const sumprice = ref(88)
</script>
<style lang="scss" scoped>
.ml-17 {
margin-left: 31.88rpx;
}
.ml-7 {
margin-left: 13.13rpx;
}
.mt-25 {
margin-top: 46.88rpx;
}
.mt-9 {
margin-top: 16.88rpx;
}
.mt-11 {
margin-top: 20.63rpx;
}
.mt-194 {
margin-top: 363.75rpx;
}
.page {
padding-bottom: 65.63rpx;
background-color: #fffaf0;
width: 100%;
// overflow-y: auto;
overflow-x: hidden;
height: 100vh;
overflow: hidden;
}
.group {
padding: 16.88rpx 15rpx 0 16.88rpx;
}
.section {
padding: 20.81rpx 13.26rpx 15.07rpx 18.62rpx;
background-color: #fffef8;
border-radius: 18.75rpx;
border: solid 1.88rpx #818181;
}
.font {
font-size: 26.25rpx;
font-family: Open Sans;
line-height: 24.43rpx;
color: #323232;
}
.text {
line-height: 24.39rpx;
}
.image_2 {
width: 43.13rpx;
height: 43.13rpx;
}
.font_2 {
font-size: 22.5rpx;
font-family: Open Sans;
line-height: 22.16rpx;
color: #818181;
}
.text_2 {
line-height: 20.83rpx;
}
.group_2 {
margin-right: 3.77rpx;
margin-top: 35.31rpx;
width: 130.05rpx;
}
.image_3 {
margin-left: 105.67rpx;
width: 24.38rpx;
height: 24.38rpx;
}
.font_3 {
font-size: 26.25rpx;
font-family: Open Sans;
line-height: 24.43rpx;
color: #fb8b05;
}
.text_3 {
margin-left: -130.05rpx;
line-height: 24.23rpx;
}
.group_3 {
padding: 0 58.2rpx;
}
.text_4 {
color: #5a5a5a;
line-height: 20.38rpx;
}
.text_5 {
line-height: 16.54rpx;
}
.section_2 {
padding: 20.49rpx 18.64rpx 18.88rpx 22.37rpx;
background-color: #fffef8;
border-radius: 18.75rpx;
border: solid 1.88rpx #818181;
}
.image_4 {
border-radius: 9.38rpx;
width: 146.25rpx;
height: 165rpx;
}
.group_4 {
margin-top: 4.07rpx;
}
.text_6 {
margin-left: 2.1rpx;
line-height: 20.79rpx;
}
.text-wrapper {
padding: 9.22rpx 0 7.56rpx;
background-color: #ffad4a78;
border-radius: 5.63rpx;
width: 84.38rpx;
height: 37.5rpx;
}
.text_7 {
line-height: 20.72rpx;
}
.text-wrapper_2 {
padding: 9.07rpx 0 7.59rpx;
background-color: #ffad4a78;
border-radius: 5.63rpx;
width: 121.88rpx;
height: 37.5rpx;
}
.text_8 {
line-height: 20.83rpx;
}
.text-wrapper_3 {
padding: 9.22rpx 0 7.56rpx;
background-color: #ffad4a78;
border-radius: 5.63rpx;
width: 114.38rpx;
height: 37.5rpx;
}
.text_9 {
line-height: 20.72rpx;
}
.group_5 {
margin-top: 15rpx;
padding: 0 5.87rpx;
}
.group_6 {
margin-left: 172.26rpx;
}
.text_10 {
margin-left: 25.03rpx;
color: #323232;
font-size: 33.75rpx;
font-family: Open Sans;
font-weight: 600;
line-height: 24.88rpx;
}
.image_7 {
width: 30rpx;
height: 30rpx;
}
.image_8 {
margin-left: -90.66rpx;
}
.text_11 {
margin-left: 61.14rpx;
font-weight: 600;
line-height: 19.29rpx;
}
.image_5 {
border-radius: 9.38rpx 0rpx 0rpx 9.38rpx;
width: 45rpx;
height: 45rpx;
}
.text-wrapper_4 {
padding: 12.39rpx 0 13.88rpx;
background-color: #fbf8dc;
width: 58.13rpx;
height: 45rpx;
}
.text_12 {
line-height: 18.73rpx;
}
.image_6 {
border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
width: 45rpx;
height: 45rpx;
}
.group_7 {
margin-top: 30rpx;
padding: 0 125.87rpx;
}
.group_8 {
line-height: 20.94rpx;
height: 20.94rpx;
}
.text_13 {
line-height: 20.79rpx;
}
.text_14 {
color: #ed4845;
line-height: 20.94rpx;
}
.image_9 {
width: 26.25rpx;
height: 26.25rpx;
}
.section_3 {
padding: 29.87rpx 7.39rpx 3.88rpx 11.12rpx;
background-color: #fffef8;
border-radius: 18.75rpx;
border: solid 1.88rpx #818181;
}
.group_9 {
padding-left: 24.54rpx;
padding-right: 12.52rpx;
}
.font_4 {
font-size: 30rpx;
font-family: Open Sans;
line-height: 27.69rpx;
color: #323232;
}
.text_15 {
line-height: 27.84rpx;
}
.font_5 {
font-size: 30rpx;
font-family: Open Sans;
line-height: 27.69rpx;
color: #818181;
}
.text_16 {
line-height: 27.6rpx;
}
.image_10 {
width: 33.75rpx;
height: 33.75rpx;
}
.font_6 {
font-size: 30rpx;
font-family: Open Sans;
line-height: 22.16rpx;
color: #323232;
}
.group_10 {
padding-left: 23.59rpx;
padding-right: 7.74rpx;
}
.text_17 {
line-height: 27.71rpx;
}
.group_11 {
width: 227.91rpx;
}
.image_11 {
margin-left: 197.91rpx;
}
.text_18 {
margin-left: -227.91rpx;
line-height: 27.81rpx;
}
.group_12 {
padding: 26.25rpx 15.19rpx 28.13rpx 23.74rpx;
border-bottom: solid 1.88rpx #dfdfdf;
}
.text_19 {
line-height: 27.64rpx;
}
.image_12 {
margin-left: 23.44rpx;
}
.text_20 {
margin-left: -57.19rpx;
line-height: 24.17rpx;
}
.text_21 {
margin-left: 27.24rpx;
color: #fb8b05;
}
.group_13 {
padding: 26.25rpx 13.73rpx 28.13rpx 23.49rpx;
}
.text_22 {
line-height: 27.54rpx;
}
.section_1 {
padding: 17.74rpx 21.99rpx 20.76rpx;
background-color: #fffef8;
border-radius: 18.75rpx;
border: solid 1.88rpx #818181;
}
.font_7 {
font-size: 30rpx;
font-family: Open Sans;
line-height: 27.69rpx;
color: #000000;
}
.text-wrapper_5 {
align-self: stretch;
margin-left: 4.13rpx;
margin-right: 4.39rpx;
}
.section_4 {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 16.88rpx 25.46rpx 25rpx;
background-color: #ffffff;
}
.image_13 {
margin-left: 85.16rpx;
}
.text_24 {
margin-left: -118.91rpx;
line-height: 28.05rpx;
}
.text_25 {
margin-left: 24.62rpx;
color: #fbb612;
font-size: 37.5rpx;
font-family: Open Sans;
font-weight: 700;
line-height: 27.62rpx;
}
.text_27 {
color: #fbb612;
font-weight: 700;
line-height: 22.05rpx;
}
.text-wrapper_6 {
padding: 21.56rpx 0 21.99rpx;
background-color: #fbb612;
border-radius: 75rpx;
width: 204.38rpx;
height: 71.25rpx;
}
.text_26 {
color: #ffffff;
}
@import url(../../../common/css/global.css);
</style>