瑶都万能墙
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

400 lines
7.9 KiB

8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
6 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
  1. <template>
  2. <uv-popup ref="popup"
  3. :round="30"
  4. bgColor="#f7f7f7">
  5. <view class="content">
  6. <!-- 地址 -->
  7. <view class="address"
  8. @click="openAddress">
  9. <image src="../../static/address/selectIcon.png" mode=""></image>
  10. <view class="">
  11. {{ address.name }}
  12. </view>
  13. <view class="">
  14. {{ address.addressDetail }}
  15. </view>
  16. <view class="icon">
  17. <uv-icon
  18. size="30rpx"
  19. name="arrow-right"></uv-icon>
  20. </view>
  21. </view>
  22. <!-- 商品信息和数量 -->
  23. <view class="submit-info">
  24. <view class="title">
  25. {{ detail.name }}
  26. </view>
  27. <view class="box">
  28. <image
  29. class="image"
  30. :src="detail.image && detail.image.split(',')[0]"
  31. mode=""></image>
  32. <view class="info">
  33. <view class="price">
  34. 价格<text>{{ detail.price }}</text>
  35. </view>
  36. <!-- <view class="unit">
  37. 请选择规格
  38. </view> -->
  39. <view class="favorable" v-if="detail.points">
  40. <view class="t">
  41. 积分兑换
  42. </view>
  43. <view class="p">
  44. {{ detail.points }}
  45. </view>
  46. </view>
  47. <view class="">
  48. <uv-number-box v-model="num"></uv-number-box>
  49. </view>
  50. </view>
  51. </view>
  52. </view>
  53. <!-- 规格 -->
  54. <!-- <view class="submit-unit">
  55. <view class="title">
  56. 规格选择
  57. </view>
  58. <view class="list">
  59. <view :class="{act : unitIndex == index}"
  60. v-for="(item, index) in detail.hotelGoodsSkuList"
  61. @click="selectUnit(item, index)"
  62. :key="index">
  63. {{ item.title }}
  64. </view>
  65. </view>
  66. </view> -->
  67. <!-- 费用明细 -->
  68. <view class="expense-detail">
  69. <view class="title">
  70. 费用明细
  71. </view>
  72. <view class="detail">
  73. 积分{{ detail.points }}
  74. </view>
  75. </view>
  76. <!-- 提交按钮 -->
  77. <view class="submit-btn">
  78. <!-- <view class="l"
  79. @click="addCart">
  80. 加入租赁车
  81. </view> -->
  82. <view class="r"
  83. @click="orderPay">
  84. {{ submiitTitle }}
  85. </view>
  86. </view>
  87. </view>
  88. <uv-popup ref="addressPopup" :round="30">
  89. <addressList
  90. ref="addressList"
  91. height="60vh"
  92. @select="selectAddress"
  93. />
  94. </uv-popup>
  95. </uv-popup>
  96. </template>
  97. <script>
  98. import addressList from '../address/addressList.vue'
  99. export default {
  100. components : {
  101. addressList,
  102. },
  103. props : {
  104. submiitTitle : {
  105. default : '立即兑换',
  106. type : String,
  107. },
  108. detail : {
  109. default : {}
  110. }
  111. },
  112. data() {
  113. return {
  114. unitIndex : 0,
  115. address : {
  116. name : '请选择联系人',
  117. addressDetail : '',
  118. },
  119. num : 1,
  120. unit : {},
  121. addressTotal : 0,
  122. }
  123. },
  124. methods: {
  125. // 打开
  126. open(){
  127. this.$refs.popup.open('bottom')
  128. // if(!this.unit.id){
  129. // this.selectUnit(this.detail.hotelGoodsSkuList[0], 0)
  130. // }
  131. // 获取地址列表
  132. this.$refs.addressList.getAddressList().then(res => {
  133. this.addressTotal = res.total
  134. if(this.addressTotal != 0){
  135. this.address = res.records[0]
  136. }
  137. })
  138. },
  139. // 关闭
  140. close(){
  141. this.$refs.popup.close()
  142. },
  143. // 打开选择地址
  144. openAddress(){
  145. if (this.addressTotal == 0) {
  146. this.$refs.popup.close()
  147. return uni.navigateTo({
  148. url: '/pages_order/mine/address?type=back'
  149. })
  150. }
  151. this.$refs.addressPopup.open('bottom')
  152. },
  153. // 选择地址
  154. selectAddress(e){
  155. this.address = e
  156. this.$refs.addressPopup.close()
  157. },
  158. // 选择规格
  159. selectUnit(item, index){
  160. this.unit = item
  161. this.unitIndex = index
  162. },
  163. addCart(){
  164. this.$api('cartAdd', {
  165. id : this.detail.id,
  166. skuId : this.unit.id,
  167. }, res => {
  168. if(res.code == 200){
  169. uni.showToast({
  170. title: '添加成功',
  171. });
  172. this.$refs.popup.close()
  173. }
  174. })
  175. },
  176. orderPay(){
  177. let data = {
  178. shopId : this.detail.id,//商品id
  179. // skuId : this.unit.id,//规格id
  180. addressId : this.address.id,//地址id
  181. // sku : this.unit.title,//规格
  182. num : this.num,
  183. }
  184. if(this.$utils.verificationAll(data, {
  185. // skuId : '请选择规格',
  186. addressId : '请选择地址',
  187. })){
  188. return
  189. }
  190. this.$api('createPointsOrder', data, res => {
  191. // this.$api('order_createPointsOrder', data, res => {
  192. if(res.code == 200){
  193. uni.redirectTo({
  194. url: '/pages/index/order'
  195. })
  196. // uni.requestPayment({
  197. // provider: 'wxpay', // 服务提提供商
  198. // timeStamp: res.result.timeStamp, // 时间戳
  199. // nonceStr: res.result.nonceStr, // 随机字符串
  200. // package: res.result.packageValue,
  201. // signType: res.result.signType, // 签名算法
  202. // paySign: res.result.paySign, // 签名
  203. // success: function (res) {
  204. // console.log('支付成功',res);
  205. // uni.redirectTo({
  206. // url: '/pages/index/order'
  207. // })
  208. // },
  209. // fail: function (err) {
  210. // console.log('支付失败',err);
  211. // uni.showToast({
  212. // icon:'none',
  213. // title:"支付失败"
  214. // })
  215. // }
  216. // });
  217. }
  218. })
  219. },
  220. }
  221. }
  222. </script>
  223. <style scoped lang="scss">
  224. .content{
  225. max-height: 80vh;
  226. overflow: hidden;
  227. overflow-y: auto;
  228. .address{
  229. display: flex;
  230. padding: 20rpx;
  231. background-color: #fff;
  232. image{
  233. width: 30rpx;
  234. height: 30rpx;
  235. margin: 20rpx;
  236. }
  237. view{
  238. margin: 20rpx;
  239. overflow:hidden; //超出的文本隐藏
  240. text-overflow:ellipsis; //溢出用省略号显示
  241. white-space:nowrap; //溢出不换行
  242. }
  243. .icon{
  244. margin-left: auto;
  245. }
  246. }
  247. .submit-info{
  248. background-color: #fff;
  249. padding: 30rpx;
  250. margin-top: 20rpx;
  251. .title{
  252. font-size: 30rpx;
  253. padding: 10rpx;
  254. font-weight: 600;
  255. }
  256. .box{
  257. display: flex;
  258. margin-top: 10rpx;
  259. .image{
  260. width: 200rpx;
  261. height: 200rpx;
  262. border-radius: 20rpx;
  263. margin-right: 20rpx;
  264. }
  265. .info{
  266. flex: 1;
  267. .unit{
  268. font-size: 24rpx;
  269. padding: 10rpx 20rpx;
  270. color: #717171;
  271. display: flex;
  272. align-items: center;
  273. }
  274. .price{
  275. color: $uni-price-color;
  276. font-size: 28rpx;
  277. padding: 10rpx 20rpx;
  278. text{
  279. font-size: 36rpx;
  280. font-weight: 900;
  281. }
  282. }
  283. .favorable{
  284. margin-left: 10rpx;
  285. display: flex;
  286. // background-image: url(/static/image/product/favorable.png);
  287. background-size: 100% 100%;
  288. width: fit-content;
  289. font-size: 22rpx;
  290. margin-top: 6rpx;
  291. margin-bottom: 6rpx;
  292. border-radius: 10rpx;
  293. overflow: hidden;
  294. background-color: #ff000011;
  295. .t{
  296. padding: 5rpx 10rpx;
  297. }
  298. .p{
  299. padding: 5rpx 10rpx;
  300. color: #fff;
  301. background-color: #F03F25;
  302. height: 100%;
  303. }
  304. }
  305. }
  306. }
  307. }
  308. .submit-unit{
  309. padding: 30rpx;
  310. background-color: #fff;
  311. .title{
  312. font-size: 28rpx;
  313. font-weight: 600;
  314. }
  315. .list{
  316. display: flex;
  317. flex-wrap: wrap;
  318. font-size: 22rpx;
  319. .act{
  320. color: $uni-price-color;
  321. border: 1px solid $uni-price-color;
  322. background-color: #F9E7DE;
  323. }
  324. view{
  325. border-radius: 15rpx;
  326. width: 320rpx;
  327. background-color: #F3F3F3;
  328. border: 1px solid #F3F3F3;
  329. margin: 10rpx;
  330. display: flex;
  331. justify-content: center;
  332. padding: 15rpx 0;
  333. }
  334. }
  335. }
  336. .expense-detail{
  337. padding: 30rpx;
  338. background-color: #fff;
  339. font-size: 28rpx;
  340. .title{
  341. font-weight: 600;
  342. }
  343. .detail{
  344. background-color: #F6F6F6;
  345. color: #717171;
  346. margin: 10rpx 0;
  347. padding: 10rpx 20rpx;
  348. }
  349. }
  350. .submit-btn{
  351. width: 600rpx;
  352. height: 80rpx;
  353. color: #fff;
  354. border-radius: 40rpx;
  355. font-size: 28rpx;
  356. margin: 20rpx auto;
  357. display: flex;
  358. justify-content: center;
  359. align-items: center;
  360. border: 1rpx solid $uni-price-color;
  361. overflow: hidden;
  362. .l{
  363. flex: 1;
  364. display: flex;
  365. justify-content: center;
  366. align-items: center;
  367. color: $uni-price-color;
  368. }
  369. .r{
  370. background: $uni-price-color;
  371. flex: 1;
  372. height: 100%;
  373. display: flex;
  374. justify-content: center;
  375. align-items: center;
  376. }
  377. }
  378. }
  379. </style>