123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185 |
- <template>
- <div id="form-1">
- <el-row>
- <el-col :span="24" class="main animate__animated animate__backInRight">
- <el-col class="top-btn">
- <el-button type="primary" size="mini" @click="toBack()">返回</el-button>
- </el-col>
- <el-col :span="8" class="one">
- <el-col :span="24" class="add">
- <el-col :span="2">
- <i class="el-icon-location"></i>
- </el-col>
- <el-col :span="22">
- <p>{{ address.name }},{{ address.phone }}</p>
- <p>{{ address.province }} , {{ address.city }} , {{ address.area }} , {{ address.address }}</p>
- </el-col>
- </el-col>
- <el-col :span="24" v-for="(item, index) in list" :key="index">
- <el-col :span="24" class="shop"> <i class="el-icon-s-shop"></i>{{ item.shop_name }}</el-col>
- <el-col :span="24" v-for="(goods, index) in item.goods" :key="index">
- <el-col :span="24" class="goods">
- <el-col :span="6"><el-image :src="goods.goods.file[0].url"></el-image></el-col>
- <el-col :span="18">
- <el-col :span="12">
- <p>{{ goods.goods.name }}</p>
- <p>规格:{{ goods.name }}</p>
- </el-col>
- <el-col :span="12" class="money">
- <p>¥{{ goods.sell_money }}</p>
- <p>X{{ goods.buy_num }}</p>
- </el-col>
- </el-col>
- </el-col>
- <el-col :span="24">
- <el-col :span="6">运费</el-col>
- <el-col :span="18" class="other" v-if="!item.freight_total == '0'">{{ item.freight_total }}</el-col>
- <el-col :span="18" class="other" v-else>包邮</el-col>
- </el-col>
- <el-col :span="24">
- <el-col :span="6">订单备注</el-col>
- <el-col :span="18" class="other" v-if="item.remarks">{{ item.remarks }}</el-col>
- <el-col :span="18" class="other" v-else>暂无备注</el-col>
- </el-col>
- </el-col>
- </el-col>
- <el-col :span="24">
- <el-col :span="6">配送方式</el-col>
- <el-col :span="18" class="other">快递配送</el-col>
- </el-col>
- <el-col :span="24" class="goods_total">
- <el-col :span="6">商品金额</el-col>
- <el-col :span="18" class="other">
- <p>¥{{ total_detail.goods_total }}</p>
- </el-col>
- </el-col>
- <el-col :span="24" class="goods_total">
- <el-col :span="6">应付金额</el-col>
- <el-col :span="18" class="other">
- <p v-if="total_detail.discount_detail">¥{{ goods_total }}</p>
- <p v-else>¥{{ total_detail.goods_total }}</p>
- </el-col>
- </el-col>
- <el-col :span="24">
- <el-col :span="6">下单时间</el-col>
- <el-col :span="18" class="other">{{ info.buy_time }}</el-col>
- </el-col>
- <el-col :span="24">
- <el-col :span="6">支付时间</el-col>
- <el-col :span="18" class="other">{{ info.pay_time || '未支付' }}</el-col>
- </el-col>
- </el-col>
- </el-col>
- </el-row>
- </div>
- </template>
- <script>
- const _ = require('lodash');
- const moment = require('moment');
- import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
- const { mapActions } = createNamespacedHelpers('order');
- export default {
- name: 'form-1',
- props: {},
- components: {},
- data: function () {
- return {
- info: {},
- address: {},
- goods_total: 0,
- list: [],
- total_detail: {},
- typeList: [],
- statusList: [],
- };
- },
- async created() {
- await this.search();
- },
- methods: {
- ...mapActions(['query', 'fetch', 'create', 'update']),
- // 查询
- async search() {
- let res = await this.fetch(this.id);
- if (this.$checkRes(res)) {
- this.$set(this, `info`, res.data);
- // 地址
- this.$set(this, `address`, res.data.address);
- // 商品
- this.$set(this, `list`, res.data.goods);
- // 实付金额
- this.$set(this, `total_detail`, res.data.total_detail);
- var goods_total = 0;
- let discount_detail = res.data.total_detail.discount_detail;
- for (const key in discount_detail) {
- if (Object.hasOwnProperty.call(discount_detail, key)) {
- const element = discount_detail[key];
- for (const i in element) {
- if (Object.hasOwnProperty.call(element, i)) {
- const ele = element[i].realPay;
- goods_total += ele;
- }
- }
- }
- }
- this.$set(this, `goods_total`, goods_total);
- }
- },
- // 返回
- toBack() {
- window.history.go('-1');
- },
- },
- computed: {
- id() {
- return this.$route.query.id;
- },
- },
- metaInfo() {
- return { title: this.$route.meta.title };
- },
- watch: {
- test: {
- deep: true,
- immediate: true,
- handler(val) {},
- },
- },
- };
- </script>
- <style lang="less" scoped>
- .main {
- .one {
- font-size: 20px;
- margin: 10px 0 0 20%;
- padding: 5px;
- .add {
- border-bottom: 2px dashed #ccc;
- margin: 0 0 5px 0;
- padding: 5px 0;
- }
- .shop {
- padding: 4px 0;
- font-size: 22px;
- border-bottom: 1px solid #ccc;
- }
- .goods {
- padding: 10px 0;
- .money {
- text-align: right;
- }
- }
- .other {
- text-align: right;
- p {
- color: red;
- }
- }
- .el-col {
- margin: 4px 0;
- }
- }
- }
- </style>
|