|
|
@@ -1,500 +1,499 @@
|
|
|
<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" v-if="address._id">
|
|
|
- <view class="name">
|
|
|
- <text>{{address.name}},</text>{{address.phone}}
|
|
|
- </view>
|
|
|
- <view class="other_1">
|
|
|
- <text>{{address.province}}</text><text>{{address.city}}</text>
|
|
|
- <text>{{address.area}}</text><text>{{address.address}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="address" v-else><text>请选择一个收货地址</text></view>
|
|
|
- <text @click="toChoose" class="iconfont icon-jiantouyou"></text>
|
|
|
- </view>
|
|
|
- <view class="one_2">
|
|
|
- <view class="list" v-for="(item,index) in orderList" :key="index">
|
|
|
- <view class="list_1">
|
|
|
- <view class="l">
|
|
|
- <text class="iconfont icon-shangdian"></text>
|
|
|
- <text>{{item.shop_name}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="list_2" v-for="(tag,index) in item.goods" :key="index">
|
|
|
- <view class="l">
|
|
|
- <image class="image" :src="tag.file&&tag.file.length>0?tag.file[0].url:''"
|
|
|
- mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="c">
|
|
|
- <view class="name">
|
|
|
- {{tag.goods_name}}
|
|
|
- </view>
|
|
|
- <view class="Spec">
|
|
|
- 规格:{{tag.goodsSpec_name}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="r">
|
|
|
- <view class="price">
|
|
|
- ¥{{tag.money}}
|
|
|
- </view>
|
|
|
- <view class="num">
|
|
|
- ×{{tag.num}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="list_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" v-if="!item.freight_total==0">￥{{item.freight_total}}
|
|
|
- </view>
|
|
|
- <view class="other_2" v-else>包邮</view>
|
|
|
- </view>
|
|
|
- <view class="other">
|
|
|
- <view class="other_1">订单备注</view>
|
|
|
- <view class="other_3">
|
|
|
- <input type="text" v-model="tag.remarks" placeholder="选填,可填写您与卖家达成一致的要求" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
- <view class="two">
|
|
|
- <view class="two_1">
|
|
|
- <view>实付金额:</view>
|
|
|
- <view>￥{{goods_total}}</view>
|
|
|
- </view>
|
|
|
- <view class="two_2">
|
|
|
- <text @click="toSubmit">提交订单</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <uni-popup ref="popup" background-color="#fff" type="right">
|
|
|
- <view class="content" v-for="(item,index) in addressList" :key="index">
|
|
|
- <view class="one">
|
|
|
- <view class="one_1">
|
|
|
- <view class="name">
|
|
|
- <text>{{item.name}},</text>{{item.phone}}
|
|
|
- </view>
|
|
|
- <view class="address">
|
|
|
- <text>{{item.province}}</text><text>{{item.city}}</text>
|
|
|
- <text>{{item.area}}</text><text>{{item.address}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <text class="iconfont icon-jiantouyou"></text>
|
|
|
- </view>
|
|
|
- <view class="two">
|
|
|
- <view class="two_1">
|
|
|
- <checkbox-group @change="toCheckbox">
|
|
|
- <label>
|
|
|
- <checkbox :value="item._id" :checked="item.checked" style="transform:scale(0.7)" />选择地址
|
|
|
- </label>
|
|
|
- </checkbox-group>
|
|
|
- </view>
|
|
|
- <view class="two_2">
|
|
|
- <text class="text" v-if="item.is_default=='1'">默认</text>
|
|
|
- <text @click="toDel(item)" class="iconfont icon-del"></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </uni-popup>
|
|
|
- </mobile-frame>
|
|
|
+ <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" v-if="address._id">
|
|
|
+ <view class="name">
|
|
|
+ <text>{{address.name}},</text>{{address.phone}}
|
|
|
+ </view>
|
|
|
+ <view class="other_1">
|
|
|
+ <text>{{address.province}}</text><text>{{address.city}}</text>
|
|
|
+ <text>{{address.area}}</text><text>{{address.address}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="address" v-else><text>请选择一个收货地址</text></view>
|
|
|
+ <text @click="toChoose" class="iconfont icon-jiantouyou"></text>
|
|
|
+ </view>
|
|
|
+ <view class="one_2">
|
|
|
+ <view class="list" v-for="(item,index) in orderList" :key="index">
|
|
|
+ <view class="list_1">
|
|
|
+ <view class="l">
|
|
|
+ <text class="iconfont icon-shangdian"></text>
|
|
|
+ <text>{{item.shop_name}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list_2" v-for="(tag,index) in item.goods" :key="index">
|
|
|
+ <view class="l">
|
|
|
+ <image class="image" :src="tag.file&&tag.file.length>0?tag.file[0].url:''" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="c">
|
|
|
+ <view class="name">
|
|
|
+ {{tag.goods_name}}
|
|
|
+ </view>
|
|
|
+ <view class="Spec">
|
|
|
+ 规格:{{tag.goodsSpec_name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="r">
|
|
|
+ <view class="price">
|
|
|
+ ¥{{tag.money}}
|
|
|
+ </view>
|
|
|
+ <view class="num">
|
|
|
+ ×{{tag.num}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list_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" v-if="!item.freight_total==0">￥{{item.freight_total}}
|
|
|
+ </view>
|
|
|
+ <view class="other_2" v-else>包邮</view>
|
|
|
+ </view>
|
|
|
+ <view class="other">
|
|
|
+ <view class="other_1">订单备注</view>
|
|
|
+ <view class="other_3">
|
|
|
+ <input type="text" v-model="tag.remarks" placeholder="选填,可填写您与卖家达成一致的要求" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ <view class="two">
|
|
|
+ <view class="two_1">
|
|
|
+ <view>实付金额:</view>
|
|
|
+ <view>￥{{goods_total}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="two_2">
|
|
|
+ <text @click="toSubmit">提交订单</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <uni-popup ref="popup" background-color="#fff" type="right">
|
|
|
+ <view class="content" v-for="(item,index) in addressList" :key="index">
|
|
|
+ <view class="one">
|
|
|
+ <view class="one_1">
|
|
|
+ <view class="name">
|
|
|
+ <text>{{item.name}},</text>{{item.phone}}
|
|
|
+ </view>
|
|
|
+ <view class="address">
|
|
|
+ <text>{{item.province}}</text><text>{{item.city}}</text>
|
|
|
+ <text>{{item.area}}</text><text>{{item.address}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <text class="iconfont icon-jiantouyou"></text>
|
|
|
+ </view>
|
|
|
+ <view class="two">
|
|
|
+ <view class="two_1">
|
|
|
+ <checkbox-group @change="toCheckbox">
|
|
|
+ <label>
|
|
|
+ <checkbox :value="item._id" :checked="item.checked" style="transform:scale(0.7)" />选择地址
|
|
|
+ </label>
|
|
|
+ </checkbox-group>
|
|
|
+ </view>
|
|
|
+ <view class="two_2">
|
|
|
+ <text class="text" v-if="item.is_default=='1'">默认</text>
|
|
|
+ <text @click="toDel(item)" class="iconfont icon-del"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ </mobile-frame>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- user: {},
|
|
|
- key: '',
|
|
|
- address: {},
|
|
|
- orderList: [],
|
|
|
- shop: [],
|
|
|
- goods_total: 0,
|
|
|
- // 金额明细
|
|
|
- total_detail: {},
|
|
|
- // 收货地址
|
|
|
- addressList: [],
|
|
|
- };
|
|
|
- },
|
|
|
- onLoad: async function(e) {
|
|
|
- const that = this;
|
|
|
- that.$set(that, `key`, e.key || '');
|
|
|
- that.watchLogin()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 选择收货地址
|
|
|
- toChoose() {
|
|
|
- const that = this;
|
|
|
- that.$refs.popup.open();
|
|
|
- },
|
|
|
- // 是否选中
|
|
|
- toCheckbox(e) {
|
|
|
- const that = this;
|
|
|
- var addressList = that.addressList;
|
|
|
- var values = e.detail.value;
|
|
|
- for (var i = 0, lenI = addressList.length; i < lenI; ++i) {
|
|
|
- const item = addressList[i]
|
|
|
- if (values.includes(item._id)) {
|
|
|
- that.$set(item, 'checked', true)
|
|
|
- that.$set(that, `address`, item);
|
|
|
- } else {
|
|
|
- that.$set(item, 'checked', false)
|
|
|
- }
|
|
|
- }
|
|
|
- that.$refs.popup.close();
|
|
|
- },
|
|
|
- // 删除收货地址
|
|
|
- toDel(e) {
|
|
|
- const that = this;
|
|
|
- uni.showModal({
|
|
|
- title: '提示',
|
|
|
- content: '确定删除该地址吗?',
|
|
|
- success: async function(res) {
|
|
|
- if (res.confirm) {
|
|
|
- const arr = await that.$api(`/address/${e._id}`, 'DELETE');
|
|
|
- if (arr.errcode == '0') {
|
|
|
- uni.showToast({
|
|
|
- title: '删除信息成功',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- that.search();
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: arr.errmsg,
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- // 提交订单
|
|
|
- async toSubmit() {
|
|
|
- const that = this;
|
|
|
- let data = {
|
|
|
- address: that.address,
|
|
|
- goods: that.orderList,
|
|
|
- total_detail: that.total_detail
|
|
|
- }
|
|
|
- const arr = await that.$api(`/order`, 'POST', data)
|
|
|
- if (arr.errcode == '0') {
|
|
|
- uni.getStorage({
|
|
|
- key: 'system',
|
|
|
- success: function(res) {
|
|
|
- // 微信小程序支付
|
|
|
- if (res.data.uniPlatform == "mp-weixin") {
|
|
|
- uni.requestPayment({
|
|
|
- "provider": "wxpay",
|
|
|
- "orderInfo": {
|
|
|
- "appid": "wx499********7c70e", // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
|
|
|
- "noncestr": "c5sEwbaNPiXAF3iv", // 随机字符串
|
|
|
- "package": "Sign=WXPay", // 固定值
|
|
|
- "partnerid": "148*****52", // 微信支付商户号
|
|
|
- "prepayid": "wx202254********************fbe90000", // 统一下单订单号
|
|
|
- "timestamp": 1597935292, // 时间戳（单位：秒）
|
|
|
- "sign": "A842B45937F6EFF60DEC7A2EAA52D5A0" // 签名，这里用的 MD5/RSA 签名
|
|
|
- },
|
|
|
- success(res) {},
|
|
|
- fail(e) {}
|
|
|
- })
|
|
|
- } else if (res.data.uniPlatform == "app") {
|
|
|
- // app支付
|
|
|
- uni.requestPayment({
|
|
|
- provider: 'alipay',
|
|
|
- orderInfo: 'orderInfo', //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
|
|
|
- success: function(res) {
|
|
|
- console.log('success:' + JSON.stringify(res));
|
|
|
- },
|
|
|
- fail: function(err) {
|
|
|
- console.log('fail:' + JSON.stringify(err));
|
|
|
- }
|
|
|
- });
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: `平台不支持支付`,
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- fail: function(err) {}
|
|
|
- })
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: arr.data.msg,
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- // 监听用户是否登录
|
|
|
- watchLogin() {
|
|
|
- const that = this;
|
|
|
- uni.getStorage({
|
|
|
- key: 'token',
|
|
|
- success: function(res) {
|
|
|
- let user = that.$jwt(res.data);
|
|
|
- that.$set(that, `user`, user);
|
|
|
- that.search()
|
|
|
- },
|
|
|
- fail: function(err) {
|
|
|
- uni.reLaunch({
|
|
|
- url: `/pages/login/index`
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 查询列表
|
|
|
- async search() {
|
|
|
- const that = this;
|
|
|
- let user = that.user;
|
|
|
- const res = await that.$api(`/address`, 'GET', {
|
|
|
- customer: user._id
|
|
|
- })
|
|
|
- if (res.errcode == '0') {
|
|
|
- that.$set(that, `addressList`, res.data);
|
|
|
- }
|
|
|
- const arr = await that.$api(`/order/toMakeOrder`, 'POST', {
|
|
|
- key: that.key
|
|
|
- })
|
|
|
- if (arr.errcode == '0') {
|
|
|
- that.$set(that, `address`, arr.data.address);
|
|
|
- that.$set(that, `orderList`, arr.data.goodsData);
|
|
|
- that.$set(that, `total_detail`, arr.data.orderTotal);
|
|
|
- var total = arr.data.orderTotal.freight_total + arr.data.orderTotal.goods_total
|
|
|
- that.$set(that, `goods_total`, total);
|
|
|
- }
|
|
|
- },
|
|
|
- }
|
|
|
- }
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ user: {},
|
|
|
+ key: '',
|
|
|
+ address: {},
|
|
|
+ orderList: [],
|
|
|
+ shop: [],
|
|
|
+ goods_total: 0,
|
|
|
+ // 金额明细
|
|
|
+ total_detail: {},
|
|
|
+ // 收货地址
|
|
|
+ addressList: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad: async function (e) {
|
|
|
+ const that = this;
|
|
|
+ that.$set(that, `key`, e.key || '');
|
|
|
+ that.watchLogin()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 选择收货地址
|
|
|
+ toChoose() {
|
|
|
+ const that = this;
|
|
|
+ that.$refs.popup.open();
|
|
|
+ },
|
|
|
+ // 是否选中
|
|
|
+ toCheckbox(e) {
|
|
|
+ const that = this;
|
|
|
+ var addressList = that.addressList;
|
|
|
+ var values = e.detail.value;
|
|
|
+ for (var i = 0, lenI = addressList.length; i < lenI; ++i) {
|
|
|
+ const item = addressList[i]
|
|
|
+ if (values.includes(item._id)) {
|
|
|
+ that.$set(item, 'checked', true)
|
|
|
+ that.$set(that, `address`, item);
|
|
|
+ } else {
|
|
|
+ that.$set(item, 'checked', false)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ that.$refs.popup.close();
|
|
|
+ },
|
|
|
+ // 删除收货地址
|
|
|
+ toDel(e) {
|
|
|
+ const that = this;
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '确定删除该地址吗?',
|
|
|
+ success: async function (res) {
|
|
|
+ if (res.confirm) {
|
|
|
+ const arr = await that.$api(`/address/${e._id}`, 'DELETE');
|
|
|
+ if (arr.errcode == '0') {
|
|
|
+ uni.showToast({
|
|
|
+ title: '删除信息成功',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ that.search();
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: arr.errmsg,
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 提交订单
|
|
|
+ async toSubmit() {
|
|
|
+ const that = this;
|
|
|
+ let data = {
|
|
|
+ address: that.address,
|
|
|
+ goods: that.orderList,
|
|
|
+ total_detail: that.total_detail
|
|
|
+ }
|
|
|
+ const arr = await that.$api(`/order`, 'POST', data)
|
|
|
+ console.log(arr)
|
|
|
+ if (arr.errcode == '0') {
|
|
|
+ uni.getStorage({
|
|
|
+ key: 'system',
|
|
|
+ success: async function (res) {
|
|
|
+ // 微信小程序支付
|
|
|
+ if (res.data.uniPlatform == "mp-weixin") {
|
|
|
+ const res = await that.$api('/pay/toPayOrder', 'POST', { order_id: arr.data, type: '0' })
|
|
|
+ console.log(res);
|
|
|
+ uni.requestPayment({
|
|
|
+ "provider": "wxpay",
|
|
|
+ ...res.data,
|
|
|
+ success(res) {
|
|
|
+ console.log('in success');
|
|
|
+ console.log(res)
|
|
|
+ },
|
|
|
+ fail(e) {
|
|
|
+ console.log('in fail');
|
|
|
+ console.log(e)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else if (res.data.uniPlatform == "app") {
|
|
|
+ // app支付
|
|
|
+ uni.requestPayment({
|
|
|
+ provider: 'alipay',
|
|
|
+ orderInfo: 'orderInfo', //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
|
|
|
+ success: function (res) {
|
|
|
+ console.log('success:' + JSON.stringify(res));
|
|
|
+ },
|
|
|
+ fail: function (err) {
|
|
|
+ console.log('fail:' + JSON.stringify(err));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: `平台不支持支付`,
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: function (err) { }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: arr.data.msg,
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 监听用户是否登录
|
|
|
+ watchLogin() {
|
|
|
+ const that = this;
|
|
|
+ uni.getStorage({
|
|
|
+ key: 'token',
|
|
|
+ success: function (res) {
|
|
|
+ let user = that.$jwt(res.data);
|
|
|
+ that.$set(that, `user`, user);
|
|
|
+ that.search()
|
|
|
+ },
|
|
|
+ fail: function (err) {
|
|
|
+ uni.reLaunch({
|
|
|
+ url: `/pages/login/index`
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 查询列表
|
|
|
+ async search() {
|
|
|
+ const that = this;
|
|
|
+ let user = that.user;
|
|
|
+ const res = await that.$api(`/address`, 'GET', {
|
|
|
+ customer: user._id
|
|
|
+ })
|
|
|
+ if (res.errcode == '0') {
|
|
|
+ that.$set(that, `addressList`, res.data);
|
|
|
+ }
|
|
|
+ const arr = await that.$api(`/order/toMakeOrder`, 'POST', {
|
|
|
+ key: that.key
|
|
|
+ })
|
|
|
+ if (arr.errcode == '0') {
|
|
|
+ that.$set(that, `address`, arr.data.address);
|
|
|
+ that.$set(that, `orderList`, arr.data.goodsData);
|
|
|
+ that.$set(that, `total_detail`, arr.data.orderTotal);
|
|
|
+ var total = arr.data.orderTotal.freight_total + arr.data.orderTotal.goods_total
|
|
|
+ that.$set(that, `goods_total`, total);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
</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;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- width: 100vw;
|
|
|
- padding: 2vw;
|
|
|
- border-bottom: 1vw dashed var(--fcColor);
|
|
|
-
|
|
|
- .address {
|
|
|
- flex-grow: 1;
|
|
|
- margin: 0 0 0 2vw;
|
|
|
- font-size: var(--font14Size);
|
|
|
- color: var(--f85Color);
|
|
|
- }
|
|
|
-
|
|
|
- .iconfont {
|
|
|
- font-size: var(--font20Szie);
|
|
|
- }
|
|
|
-
|
|
|
- .other {
|
|
|
- width: 82vw;
|
|
|
- padding: 0 2vw;
|
|
|
-
|
|
|
- .name {
|
|
|
- font-size: var(--font16Size);
|
|
|
- }
|
|
|
-
|
|
|
- .other_1 {
|
|
|
- font-size: var(--font14Size);
|
|
|
- color: var(--f85Color);
|
|
|
-
|
|
|
- text {
|
|
|
- margin: 0 1vw 0 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .one_2 {
|
|
|
- margin: 2vw 0 0 0;
|
|
|
-
|
|
|
- .list {
|
|
|
- width: 100vw;
|
|
|
- margin: 2vw 0;
|
|
|
-
|
|
|
- .list_1 {
|
|
|
- padding: 2vw;
|
|
|
- background-color: var(--mainColor);
|
|
|
- border-bottom: 0.1vw solid var(--fcColor);
|
|
|
-
|
|
|
- text {
|
|
|
- padding: 0 0 0 1vw;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .list_2 {
|
|
|
- padding: 2vw;
|
|
|
- display: flex;
|
|
|
- background-color: var(--mainColor);
|
|
|
-
|
|
|
- .l {
|
|
|
- width: 20vw;
|
|
|
-
|
|
|
- .image {
|
|
|
- width: 100%;
|
|
|
- height: 20vw;
|
|
|
- border-radius: 5px;
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .c {
|
|
|
- width: 60vw;
|
|
|
- padding: 0 2vw;
|
|
|
-
|
|
|
- .Spec {
|
|
|
- font-size: var(--font12Size);
|
|
|
- color: var(--f85Color);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .r {
|
|
|
- width: 15vw;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .list_3 {
|
|
|
- width: 96vw;
|
|
|
- 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;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- background-color: var(--f1Color);
|
|
|
-
|
|
|
- .one {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin: 2vw 0 0 0;
|
|
|
- padding: 2vw;
|
|
|
- background-color: var(--mainColor);
|
|
|
-
|
|
|
- .name {
|
|
|
- font-size: var(--font16Size);
|
|
|
- }
|
|
|
-
|
|
|
- .address {
|
|
|
- font-size: var(--font14Size);
|
|
|
- }
|
|
|
-
|
|
|
- .iconfont {
|
|
|
- line-height: 15vw;
|
|
|
- font-size: var(--font20Szie);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .two {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- border-top: 0.1vw solid var(--fcColor);
|
|
|
- padding: 2vw;
|
|
|
- background-color: var(--mainColor);
|
|
|
- font-size: var(--font14Size);
|
|
|
-
|
|
|
- .text {
|
|
|
- margin: 0 2vw 0 0;
|
|
|
- border: 0.1vw solid var(--fFB1Color);
|
|
|
- padding: 1vw;
|
|
|
- font-size: var(--font12Size);
|
|
|
- border-radius: 2vw;
|
|
|
- color: var(--fFB1Color);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+.main {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+
|
|
|
+ .one {
|
|
|
+ position: relative;
|
|
|
+ flex-grow: 1;
|
|
|
+ background-color: var(--f1Color);
|
|
|
+
|
|
|
+ .one_1 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ width: 100vw;
|
|
|
+ padding: 2vw;
|
|
|
+ border-bottom: 1vw dashed var(--fcColor);
|
|
|
+
|
|
|
+ .address {
|
|
|
+ flex-grow: 1;
|
|
|
+ margin: 0 0 0 2vw;
|
|
|
+ font-size: var(--font14Size);
|
|
|
+ color: var(--f85Color);
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ font-size: var(--font20Szie);
|
|
|
+ }
|
|
|
+
|
|
|
+ .other {
|
|
|
+ width: 82vw;
|
|
|
+ padding: 0 2vw;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: var(--font16Size);
|
|
|
+ }
|
|
|
+
|
|
|
+ .other_1 {
|
|
|
+ font-size: var(--font14Size);
|
|
|
+ color: var(--f85Color);
|
|
|
+
|
|
|
+ text {
|
|
|
+ margin: 0 1vw 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_2 {
|
|
|
+ margin: 2vw 0 0 0;
|
|
|
+
|
|
|
+ .list {
|
|
|
+ width: 100vw;
|
|
|
+ margin: 2vw 0;
|
|
|
+
|
|
|
+ .list_1 {
|
|
|
+ padding: 2vw;
|
|
|
+ background-color: var(--mainColor);
|
|
|
+ border-bottom: 0.1vw solid var(--fcColor);
|
|
|
+
|
|
|
+ text {
|
|
|
+ padding: 0 0 0 1vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_2 {
|
|
|
+ padding: 2vw;
|
|
|
+ display: flex;
|
|
|
+ background-color: var(--mainColor);
|
|
|
+
|
|
|
+ .l {
|
|
|
+ width: 20vw;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 20vw;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .c {
|
|
|
+ width: 60vw;
|
|
|
+ padding: 0 2vw;
|
|
|
+
|
|
|
+ .Spec {
|
|
|
+ font-size: var(--font12Size);
|
|
|
+ color: var(--f85Color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .r {
|
|
|
+ width: 15vw;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_3 {
|
|
|
+ width: 96vw;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background-color: var(--f1Color);
|
|
|
+
|
|
|
+ .one {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 2vw 0 0 0;
|
|
|
+ padding: 2vw;
|
|
|
+ background-color: var(--mainColor);
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: var(--font16Size);
|
|
|
+ }
|
|
|
+
|
|
|
+ .address {
|
|
|
+ font-size: var(--font14Size);
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ line-height: 15vw;
|
|
|
+ font-size: var(--font20Szie);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .two {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-top: 0.1vw solid var(--fcColor);
|
|
|
+ padding: 2vw;
|
|
|
+ background-color: var(--mainColor);
|
|
|
+ font-size: var(--font14Size);
|
|
|
+
|
|
|
+ .text {
|
|
|
+ margin: 0 2vw 0 0;
|
|
|
+ border: 0.1vw solid var(--fFB1Color);
|
|
|
+ padding: 1vw;
|
|
|
+ font-size: var(--font12Size);
|
|
|
+ border-radius: 2vw;
|
|
|
+ color: var(--fFB1Color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
