|
|
@@ -0,0 +1,270 @@
|
|
|
+<template>
|
|
|
+ <mobile-frame>
|
|
|
+ <view class="main">
|
|
|
+ <view class="one">
|
|
|
+ <scroll-view scroll-y="true" class="scroll-view">
|
|
|
+ <view class="list-scroll-view">
|
|
|
+ <view class="one_1">
|
|
|
+ <text class="localicon iconfont icon-dingweixiao"></text>
|
|
|
+ <view class="other">
|
|
|
+ <view class="name">
|
|
|
+ <text>{{info.name}},</text>{{info.phone}}
|
|
|
+ </view>
|
|
|
+ <view class="other_1">
|
|
|
+ {{info.address}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <text class="iconfont icon-jiantouyou"></text>
|
|
|
+ </view>
|
|
|
+ <view class="one_2">
|
|
|
+ <view class="list">
|
|
|
+ <view class="list_1">
|
|
|
+ <view class="l">
|
|
|
+ <text class="iconfont icon-shangdian"></text>
|
|
|
+ <text>{{shop.shop}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list_2">
|
|
|
+ <view class="l">
|
|
|
+ <image class="image" :src="shop.url&&shop.url.length>0?shop.url[0].url:''"
|
|
|
+ mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="c">
|
|
|
+ <view class="name">
|
|
|
+ {{shop.name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="r">
|
|
|
+ <view class="price">
|
|
|
+ ¥{{shop.price}}
|
|
|
+ </view>
|
|
|
+ <view class="num">
|
|
|
+ ×{{shop.buy_num}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="one_3">
|
|
|
+ <view class="other">
|
|
|
+ <view class="other_1">配送方式</view>
|
|
|
+ <view class="other_2"><text class="iconfont icon-duihao"></text>快递配送</view>
|
|
|
+ </view>
|
|
|
+ <view class="other">
|
|
|
+ <view class="other_1">运费</view>
|
|
|
+ <view class="other_2">￥{{info.freight}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="other">
|
|
|
+ <view class="other_1">订单备注</view>
|
|
|
+ <view class="other_3">
|
|
|
+ <input type="text" v-model="info.remarks" placeholder="选填,可填写您与卖家达成一致的要求" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ <view class="two">
|
|
|
+ <view class="two_1">
|
|
|
+ <view>实付金额:</view>
|
|
|
+ <view>￥{{info.money}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="two_2">
|
|
|
+ <text @click="toSubmit">提交订单</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </mobile-frame>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ info: {
|
|
|
+ name: '张饱饱',
|
|
|
+ phone: '12345678901',
|
|
|
+ money: 79.8,
|
|
|
+ freight: 7,
|
|
|
+ address: '吉林省 长春市 朝阳区 南湖街道朝阳区吉林省科技厅科研园（富强街西）105'
|
|
|
+ },
|
|
|
+ shop: {
|
|
|
+ shop: '官方自营店',
|
|
|
+ status: '1',
|
|
|
+ url: [{
|
|
|
+ name: "20220928155634.jpg",
|
|
|
+ uri: "/files/point/20220928155634.jpg",
|
|
|
+ url: "https://broadcast.waityou24.cn/files/point/20220928155634.jpg"
|
|
|
+ }],
|
|
|
+ name: '饮用水',
|
|
|
+ price: 58,
|
|
|
+ buy_num: 1,
|
|
|
+ market_num: 1,
|
|
|
+ money: 58
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onShow: function() {},
|
|
|
+ methods: {
|
|
|
+ // 提交订单
|
|
|
+ toSubmit() {
|
|
|
+
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .main {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+
|
|
|
+ .one {
|
|
|
+ position: relative;
|
|
|
+ flex-grow: 1;
|
|
|
+ background-color: var(--f1Color);
|
|
|
+
|
|
|
+ .one_1 {
|
|
|
+ display: flex;
|
|
|
+ padding: 2vw;
|
|
|
+ border-bottom: 1vw dashed var(--fcColor);
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ line-height: 15vw;
|
|
|
+ font-size: var(--font20Szie);
|
|
|
+ }
|
|
|
+
|
|
|
+ .other {
|
|
|
+ width: 82vw;
|
|
|
+ padding: 0 2vw;
|
|
|
+ .name{
|
|
|
+ font-size: var(--font16Size);
|
|
|
+ }
|
|
|
+ .other_1{
|
|
|
+ font-size: var(--font14Size);
|
|
|
+ color: var(--f85Color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_2 {
|
|
|
+ margin: 2vw 0 0 0;
|
|
|
+ background-color: var(--mainColor);
|
|
|
+
|
|
|
+ .list {
|
|
|
+ width: 96vw;
|
|
|
+ padding: 0 2vw;
|
|
|
+
|
|
|
+ .list_1 {
|
|
|
+ margin: 0 0 1vw 0;
|
|
|
+ padding: 1vw 0;
|
|
|
+ border-bottom: 0.1vw solid var(--fcColor);
|
|
|
+
|
|
|
+ text {
|
|
|
+ padding: 0 0 0 1vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_2 {
|
|
|
+ margin: 0 0 1vw 0;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .l {
|
|
|
+ width: 20vw;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 20vw;
|
|
|
+ border-radius: 5px;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .c {
|
|
|
+ width: 60vw;
|
|
|
+ padding: 0 2vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .r {
|
|
|
+ width: 15vw;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_3 {
|
|
|
+ width: 96vw;
|
|
|
+ margin: 2vw 0 0 0;
|
|
|
+ padding: 2vw;
|
|
|
+ background-color: var(--mainColor);
|
|
|
+
|
|
|
+ .other {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 0.1vw solid var(--fcColor);
|
|
|
+ margin: 0 0 2vw 0;
|
|
|
+ padding: 2vw 0;
|
|
|
+
|
|
|
+ .other_1 {
|
|
|
+ font-size: var(--font16Size);
|
|
|
+ color: var(--f85Color);
|
|
|
+ }
|
|
|
+
|
|
|
+ .other_3 {
|
|
|
+ flex-grow: 1;
|
|
|
+ margin: 0 0 0 2vw;
|
|
|
+ font-size: var(--font12Size);
|
|
|
+ }
|
|
|
+
|
|
|
+ text {
|
|
|
+ padding: 0 1vw 0 0;
|
|
|
+ font-size: var(--font20Szie);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .two {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-top: 0.1vw solid var(--fcColor);
|
|
|
+
|
|
|
+ .two_1 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 2vw;
|
|
|
+ font-size: var(--font16Size);
|
|
|
+
|
|
|
+ view:last-child {
|
|
|
+ margin: 0 0 0 2vw;
|
|
|
+ color: var(--ff0Color);
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .two_2 {
|
|
|
+ padding: 3vw 4vw;
|
|
|
+ color: var(--mainColor);
|
|
|
+ font-size: var(--font16Size);
|
|
|
+ background-color: var(--ff0Color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-view {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+
|
|
|
+ .list-scroll-view {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
zs