120 lines
3.0 KiB
Vue
120 lines
3.0 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="info">
|
|
<div class="cro">
|
|
<div class="cro_left_bottom"></div>
|
|
<div class="cro_right_bottom"></div>
|
|
<view class="img">
|
|
<u-image width="100%" height="580rpx" :src="info.pic"></u-image>
|
|
<view class="" style="font-size: 36rpx;color: #333333;margin-top: 40rpx;">红色西柚新鲜砧板水果原产地加拿大美食新鲜爆汁5斤</view>
|
|
</view>
|
|
</div>
|
|
<div class="cro cro2">
|
|
<div class="cro_left_top"></div>
|
|
<div class="cro_right_top"></div>
|
|
<view class="img">
|
|
<view class="u-content"><u-parse :html="info.note"></u-parse></view>
|
|
</view>
|
|
</div>
|
|
<!-- <view class="" @click="show = true">设置城市</view>
|
|
<view class="">{{ val }}</view>
|
|
<u-picker mode="region" v-model="show" :area-code="arrCode" @confirm="change"></u-picker> -->
|
|
</view>
|
|
<view class="" style="position: absolute;bottom: 0;width: 100%;">
|
|
<u-button type="error" style="background: #FF4900;border-radius: 0;height: 100rpx;font-size: 36rpx;color: #FFFEFD;">填写收货地址</u-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getInfo } from '@/common/api.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
info: {},
|
|
options: {},
|
|
show: false,
|
|
val: '',
|
|
arrCode: []
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (!options.id) return uni.$showMsg('请扫描二维码访问')
|
|
this.options = options
|
|
getInfo(options).then(({ data }) => {
|
|
this.info = data
|
|
})
|
|
},
|
|
methods: {
|
|
change(e) {
|
|
this.val = e.province.label + e.city.label + e.area.label
|
|
this.arrCode = [e.province.value, e.city.value, e.area.value]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
height: calc(100vh - 100rpx);
|
|
background: url(../../static/bgi.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
.info {
|
|
padding: 52rpx 25rpx 34rpx;
|
|
.cro {
|
|
width: 100%;
|
|
background-color: #ffffff;
|
|
position: relative;
|
|
border-radius: 15px 15px 0 0;
|
|
.img {
|
|
padding: 40rpx;
|
|
.u-image {
|
|
border-radius: 15px !important;
|
|
overflow: hidden !important;
|
|
}
|
|
}
|
|
}
|
|
.cro2 {
|
|
width: 100%;
|
|
height: 100px;
|
|
border-top: 1px dashed #dedede;
|
|
background-color: #ffffff;
|
|
position: relative;
|
|
border-radius: 0 0 15px 15px;
|
|
}
|
|
.cro_left_top,
|
|
.cro_right_top,
|
|
.cro_left_bottom,
|
|
.cro_right_bottom {
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
z-index: 1;
|
|
background-color: #fc843f;
|
|
}
|
|
.cro_left_top {
|
|
top: -1px;
|
|
left: -1px;
|
|
border-radius: 0 0 10px 0;
|
|
}
|
|
.cro_right_top {
|
|
top: -1px;
|
|
right: -1px;
|
|
background-color: #f99954;
|
|
border-radius: 0 0 0 10px;
|
|
}
|
|
.cro_left_bottom {
|
|
left: -1px;
|
|
bottom: -1px;
|
|
border-radius: 0 10px 0 0;
|
|
}
|
|
.cro_right_bottom {
|
|
right: -1px;
|
|
bottom: -1px;
|
|
background-color: #f99954;
|
|
border-radius: 10px 0 0 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|